<template>
  <div id="command" class="paT55">
    <div ref="ele" id="mapGeo" style="position: relative;margin-top: 3px;width: 100%"
         :style="{'height': clientHeight-113+'px'}">
      <!-- map 事件弹窗-->
      <div id="popupDiv" class="popupDiv" v-show="popupShow">
        <div
            style="position: relative;width: calc(100% - 3px);left: 3px;top: 3px;height: 35px;background-color: rgba(250, 250, 250, 0.2);color: white;line-height: 35px;font-size: 16px">
          <p style="padding-left: 10px">{{eventData.findTime}}</p>
          <i class="el-icon-close"
             style="position: absolute;width: 30px;height: 30px;background-color: rgba(0,0,0,0.4);right: 0;top: 0;line-height: 30px;text-align: center;cursor: pointer;"
             @click="popupShow = false"></i>
        </div>
        <div style="width:500px;margin: 15px auto;">
          <div style="width: 100%;padding: 0 20px 10px 20px;box-sizing: border-box;">
            <el-carousel height="280px" :autoplay="false" class="carousel " trigger="click">
              <el-carousel-item v-for="(item, i) in eventData.fileList" :key="i" v-if="item.status === 'img'">
                <div  @mouseover="iconShow = true" @mouseleave="iconShow = false" style="width: 100%;height: 100%">
                  <div class="demo-image__preview" style="width: 100%;height: 100%">
                    <el-image
                        style="height: 100%;width: 100%"
                        :src="fileServerUrl + item.path"
                        fit="scale-down"
                    >
                    </el-image>
                  </div>
                  <div v-if="iconShow"
                       style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2)"></div>
                  <i v-if="iconShow" @click="bigPhotoShow(fileServerUrl + item.path)" class="el-icon-zoom-in"
                     style="position: absolute;left: calc(50% - 15px);top: calc(50% - 15px);font-size: 30px;cursor:pointer;"></i>
                </div>
              </el-carousel-item>
              <el-carousel-item v-for="(item, i) in eventData.fileList" :key="i" v-if="item.status === 'video'">
                <video :src="fileServerUrl + item.path" controls="controls" width="100%" height="100%">
                  您的浏览器不支持 video 标签。
                </video>
              </el-carousel-item>
              <el-carousel-item v-for="(item, i) in eventData.fileList" :key="i" v-if="item.status === 'mp3'">
                <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
                  <audio  controls="controls" :src="fileServerUrl + item.path">
                    当前浏览器不支持audio
                  </audio>
                </div>
              </el-carousel-item>
              <el-carousel-item v-if="eventData.fileList && eventData.fileList.length === 0" style="display: flex;justify-content: center;align-items: center;color: white;font-size: 16px">
                暂无数据
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
              style="display: flex;flex-wrap: wrap;width: 100%;line-height: 25px;padding: 0 20px 10px 20px;box-sizing: border-box">
            <div class="event-detail">
              <span>时间：</span>
              <span>{{eventData.surveyTime}}</span>
            </div>
            <div class="event-detail">
              <span>样地编号：</span>
              <span>{{eventData.sampleVo?eventData.sampleVo.sampleNumber:''}}</span>
            </div>
            <div class="event-detail">
              <span>样地物种：</span>
              <span>{{eventData.sampleVo?eventData.sampleVo.species:''}}</span>
            </div>
            <div class="event-detail">
              <span>状态：</span>
              <span>{{!eventData.status?'未处理':'已处理'}}</span>
            </div>
            <div class="event-detail">
              <span>备注：</span>
              <span>{{eventData.remark}}</span>
            </div>
            <div class="event-detail">
              <span>坐标：</span>
              <span>{{eventData.lon | numberFilter}},{{eventData.lat | numberFilter}}</span>
            </div>

          </div>
        </div>
        <div class="triangle-down"></div>
      </div>
      <!-- map工具栏l -->
      <div style="position: fixed;bottom: 10px;right: 0;z-index: 100;top: 113px">
        <div style="display: flex">
          <div style="position: relative" :style="{'height': divheight - 10+'px'}">
            <div class="mapTools dropdown-ctrl">
              <el-badge :value="this.tableTotal" class="item" style="position: relative;z-index: 999">
                <el-button size="medium " @click="clickSample">样地个体调查</el-button>
              </el-badge>
              <el-dropdown :hide-on-click="false" @command="fastScaleSkip">
                <el-button type="">
                  比例尺<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="background:rgba(15,114,195,.6);" class="dropdownMenu">
                  <el-dropdown-item :command="18" style="color: #FFFFFF">1 : 50</el-dropdown-item>
                  <el-dropdown-item :command="15" style="color: #FFFFFF">1 : 500</el-dropdown-item>
                  <el-dropdown-item :command="14" style="color: #FFFFFF">1 : 1000</el-dropdown-item>
                  <el-dropdown-item :command="12" style="color: #FFFFFF">1 : 5000</el-dropdown-item>
                  <el-dropdown-item :command="10" style="color: #FFFFFF">1 : 10000</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown :hide-on-click="false" @command="toolPlot">
                <el-button type="" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0;">
                  标绘<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="background:rgba(15,114,195,.6);" class="dropdownMenu">
                  <el-dropdown-item command="Point">
                    <img :src="menu[0].icon" style="width: 15px;height: 15px;"/>
                    <span style="font-size: 12px;color: #FFFFFF">{{menu[0].text}}</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="LineString">
                    <img :src="menu[2].icon" style="width: 15px;height: 15px;"/>
                    <span style="font-size: 12px;color: #FFFFFF">{{menu[1].text}}</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="Polygon">
                    <img :src="menu[1].icon" style="width: 15px;height: 15px;"/>
                    <span style="font-size: 12px;color: #FFFFFF">{{menu[2].text}}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown :hide-on-click="false" @command="measure">
                <el-button type="" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0">
                  测量<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="background:rgba(15,114,195,.6);" class="dropdownMenu">
                  <el-dropdown-item command="LineString">
                    <img :src="menu[3].icon" style="width: 15px;height: 15px;"/>
                    <span style="font-size: 12px;color: #FFFFFF">{{menu[3].text}}</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="Polygon">
                    <img :src="menu[5].icon" style="width: 15px;height: 15px;"/>
                    <span style="font-size: 12px;color: #FFFFFF">{{menu[4].text}}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown :hide-on-click="false">
                <el-button type="" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0">
                  工具<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="background:rgba(15,114,195,.6);" class="dropdownMenu">
                  <el-dropdown-item>
                    <div @click="pickupCoord">
                      <img :src="menu[4].icon" style="width: 15px;height: 15px;"/>
                      <span style="font-size: 12px;color: #FFFFFF">{{menu[5].text}}</span>
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div @click="locationShow = true">
                      <img :src="menu[6].icon" style="width: 15px;height: 15px;"/>
                      <span style="font-size: 12px;color: #FFFFFF">{{menu[6].text}}</span>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown :hide-on-click="false">
                <el-button type="">
                  图层<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="checkbox menu dropdownMenu"
                                  style="background:rgba(15,114,195,.6);color: white">
                  <el-checkbox-group v-model="layerCheckList" v-for="(item,index) in layerControl" :key="index"
                                     @change="checkLayer">
                    <el-dropdown-item :command="1">
                      <el-checkbox v-show="item.id" :label="item.id">{{item.name}}</el-checkbox>
                    </el-dropdown-item>
                  </el-checkbox-group>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
            <div id="mapFull" @click="full = !full" :class="full === true?'full': 'small'"
                 style="cursor: pointer;;z-index: 100;position: absolute;top: 20px;right: 10px;"></div>

            <!-- 右下角控件区 -->
            <div
                style="position: absolute;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3);width: 250px;height: 25px;z-index: 100;">
              <div id="mouse-position"
                   style="text-align: center;color: white;line-height: 25px;padding-right: 10px;"></div>
            </div>
            <div style="position: absolute;right: 280px;bottom: 5px;z-index: 100;">
              <div id="scaleLineControl"
                   style="position: relative;line-height: 25px;border-bottom: 2px solid #fff;text-align: center;color: white"></div>
              <div style="position: absolute;left: 0;top: 21px;height: 8px;border-left: 2px solid #FFF"></div>
              <div style="position: absolute;right: 0;top: 21px;height: 8px;border-left: 2px solid #FFF"></div>
            </div>
            <div style="position: absolute;right: 10px; bottom: 30px;display: flex;height: 100px;z-index: 100">
              <div v-for="(item, i) in mapType" :key="i" class="mapType" @click="mapTypeSelect(i)"
                   @mouseenter="allTypeShow = true"
                   @mouseleave="allTypeShow = false" v-show="index === i || allTypeShow === true"
                   :class="allTypeShow === false?'padingR5': ''" style="position: relative;">
                <img :src="item.photo" @click="switchMap(item.type)"/>
                <div class="mapTypeText" :class="{'textWidth': i === 2}">{{item.text}}</div>
              </div>
            </div>
            <div v-show="peopleIndex != null" class="ctrlButton rightButton" style="right: 0;"
                 @click="rightShow = !rightShow">
              <i :class="rightShow === true? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
            </div>
          </div>
          <!--右侧-->
          <div v-show="rightShow" class="rightWrapper" style="width: 300px;margin: 5px 0"
               :style="{'height': divheight - 15+'px'}">
            <div class="item-title">{{peopleName}}--工作详情</div>
            <Calendar style="margin:10px 0" :markDateMore="calendarMarkDate" v-on:choseDay="clickDay" class="calendar"
                      v-on:changeMonth="changeDate">
            </Calendar>
            <div class="item-title">共有轨迹：<span class="number">{{trackListData.length}}</span>条，事件：<span class="number">{{eventListData.length}}</span>件
            </div>
            <div style="width: 100%;box-sizing: border-box" :style="{'height': divheight-448+'px'}"
                 class="scroll">
              <el-scrollbar class="page-component_scroll">
                <el-tabs v-model="activeTabName">
                  <el-tab-pane label="轨迹" name="track" class="rightBottomItem">
                    <div class="rightBottomItemScoll">
                      <div @click="trackShow(item)" v-for="(item, i) in trackListData" :key="i" style="width: 100%;margin-top: 8px;
                padding: 0 10px;box-sizing: border-box;"
                           :class="item.id === trackId ? 'trackDivActive' : 'trackDivNoActive'">
                        <div
                            style="font-size:16px;position: relative;padding-left: 5px;box-sizing: border-box;border-bottom: 1px solid rgba(255,255,255,0.8);line-height: 35px;overflow: hidden">
                          轨迹{{i + 1}}
                          <div v-if="(item.id === trackId && trackLineCoords.length>0)" style="position:absolute;right:0;top:-4px;display:flex;
                         padding-right: 20px">
                            <div @click.stop="">
                              <el-slider style="width: 50px" v-model="speed" :min="1" :max="5" :step="1" input-size="mini"
                                         @change="speedChange"></el-slider>
                            </div>
                            <i style="float: left;margin-left: 10px;line-height: 38px;font-size: 22px;"
                               :class="isPlay ? 'el-icon-circle-close' : 'el-icon-video-play'"
                               @click.stop="trackPlay(item)" :title="isPlay ? '取消播放':'播放轨迹'"></i>
                          </div>
                        </div>
                        <div style="font-size: 14px;line-height: 28px;color: #ffffff">
                          <p><span>{{item.remark}}</span></p>
                          <p><span>{{item.startDate}} — {{item.endDate}}</span></p>
                          <p><span>距离：约{{item.distance | distanceFilter}}</span><span style="padding-left: 40px;">时长：约{{item.duration | durationFilter}}</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="事件" name="event" class="rightBottomItem">
                    <div class="rightBottomItemScoll">
                      <div v-for="(item, i) in eventListData" :key="i" style="width: 100%;margin-top: 8px;
                padding: 0 10px;box-sizing: border-box;"
                           :class="item.id === eventId ? 'trackDivActive' : 'trackDivNoActive'"
                           @click.stop="clickLoadEventData(item.feature,item.id)">
                        <div
                            style="font-size:16px;position: relative;padding-left: 5px;box-sizing: border-box;border-bottom: 1px solid rgba(255,255,255,0.8);line-height: 35px">
                          事件{{i + 1}}
                        </div>
                        <div style="font-size: 14px;line-height: 22px;color: #ffffff">
                          <p><span>时间：{{item.surveyTime}}</span><span style="padding-left: 30px;">样地编号：{{item.sampleVo?item.sampleVo.sampleNumber:''}}</span>
                          </p>
                          <p><span>样地物种：{{item.sampleVo?item.sampleVo.species:''}}</span><span
                              style="padding-left: 30px;">状态：{{!item.status?'未处理':'已处理'}}</span></p>
                          <p>
                            <span>坐标：{{item.lon | numberFilter}},{{item.lat | numberFilter}}</span>
                            <span style="padding-left: 30px;">文件数：{{item.fileList.length}}</span>
                          </p>
                          <p>
                          <p><span>备注：{{item.remark}}</span></p>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <!-- leftDiv-->
      <div style="position: absolute;top: 0;left: 0;display: flex;" :style="{'height': divheight-18+'px'}">
        <div class="leftDiv" style="width: 300px;z-index: 100; margin: 5px 0;position: relative"
             :style="{'height': divheight-18+'px'}" v-show="leftShow === true">
          <el-scrollbar style="width: 100%" class="personnelWrapper" v-if="showPersonnel">
            <div class="scool">
              <div class="item-title" :class="{'active': active}" style="cursor: pointer;" @click="clickTotal">总人数：<span
                  class="number">{{peopleListData.length}}</span>
                <span style="float: right;margin-right: 10px">
                <i :class="peopleShow === true?'el-icon-arrow-down':'el-icon-arrow-right'"></i>
                </span>
              </div>
              <el-collapse-transition>
                <div v-if="peopleShow === true">
                  <div style="margin-top: 10px">
                    <div class="item-title" style="height: 30px;line-height: 30px;">
                      <p style="padding-left: 10px">在线人数：<span class="number">{{onlineStaffData.length}}</span></p>
                    </div>
                    <div class="item-title" style="height: 30px;line-height: 30px;margin-top: 8px">
                      <p style="padding-left: 10px">离线人数：<span class="number">{{peopleListData.length - onlineStaffData.length}}</span>
                      </p>
                    </div>
                  </div>
                  <el-scrollbar style="" class="patrolInput ">
                    <div class="searchPersonnel">
                      <el-input v-model="filtInput" size="mini" placeholder="请输入姓名查询" style="padding-top: 10px"
                                ref="filtInput" @keyup.native="filterStaff">
                        <i class="el-icon-search el-input__icon" slot="suffix" style="color: #00F5FF;;padding-top: 5px"></i>
                      </el-input>
                      <div style="margin-top: 5px" :style="{'height': divheight-530+'px'}" class="scroll">
                        <div >
                          <div v-for="(item, i) in peopleList" :key="item.id" @click="peopleClick(i)" style="height: 30px;border-radius: 5px;
                padding: 8px 15px 8px 10px;margin-bottom: 5px;" :class="item.active?'peopleActive':'people'">
                            <img :src="item.isOnline?staffHeadOnline:staffHeadUnline" style="float: left;width: 30px"/>
                            <div style="float: left;font-size: 16px;margin-left: 5px;display: inline-flex">
                              <p>{{item.name}}</p>
                              <p style="font-size: 12px">{{item.mobilePhoneNo}}</p>
                            </div>
                            <i style="float: right;font-size: 14px;line-height: 30px;font-style:normal;padding-left: 3px;">{{item.isOnline
                              ? '在线' : '离线'}}</i>
                            <i class="el-icon-location-outline peopLocation"
                               style="float: right;font-size: 20px;line-height: 30px;cursor: pointer"
                               @click.stop="peopleLocation(i)" title="定位"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </el-collapse-transition>
              <div class="item-title" style="margin-top: 10px">里程统计</div>
              <div style="display: flex;height: 28px;padding: 0 5px;margin-top: 10px;box-sizing: border-box">
                <div style="padding: 0 2px;box-sizing: border-box" class="patrolInput">
                  <el-select v-model="timeTypeTJVal" size="mini" style="width: 60px" @change="statisticConditionChange">
                    <el-option
                        v-for="item in timeTJOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div style="padding: 0 2px;box-sizing: border-box" class="patrolInput">
                  <el-date-picker
                      :clearable="false"
                      size="mini"
                      style="width: 120px"
                      v-model="timeTJVal"
                      value-format="yyyy-MM-dd"
                      :type="timeTypeTJVal"
                      @change="statisticConditionChange">
                  </el-date-picker>
                </div>
                <div style="box-sizing: border-box" class="patrolInput">
                  <el-select v-model="peopleTJVal" size="mini" style="width: 80px" @change="statisticConditionChange">
                    <el-option
                        v-for="item in peopleListTJ"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div id="echart" style="height: 300px;margin-top: 5px;padding: 5px"></div>
            </div>
          </el-scrollbar>

          <div v-if="showTransect" class="transectWrapper">
            <div class="transectContent" v-if="this.cities.length > 0">
              <div class="transectTitle">样地列表</div>
              <el-scrollbar style="height: 713px">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city.id" :key="city.id" style="display: block;margin-left: 15px;line-height: 40px;font-size: 16px">{{`${city.sampleNumber}  (${city.plantType})`}}</el-checkbox>
                </el-checkbox-group>
              </el-scrollbar>
              <Pagination class="transect-pagination" :total="this.transectTotal"
                          @handleCurrentChange="handleCurrentPagination"
                          is-small="true"
              ></Pagination>
            </div>
          </div>
          <div class="leftDivNav">
            <div class="navItem" @click="showPerson" :class="{'active': this.showPersonnel}">人员</div>
            <div class="navItem" @click="showTran" :class="{'active': this.showTransect}">样地</div>
          </div>
        </div>
        <div class="ctrlButton" style="right: -40px;z-index: 100" @click="showLeftDiv">
          <i :class="leftShow === true? 'el-icon-d-arrow-left':'el-icon-d-arrow-right'"></i>
        </div>
      </div>
      <!-- map 定位弹窗 -->
      <div v-show="locationShow" class="location">
        <i class="el-icon-close" style="position: absolute;width: 30px;height: 30px;background-color: rgba(0,0,0,0.4);right: 0;
          top: 3px;line-height: 30px;text-align: center;cursor: pointer;" @click="locationShow = false"></i>
        <div class="locationTitle">坐标定位</div>
        <div style="margin-top: 10px;padding: 5px 12px 10px;text-align: center; background:rgba(15,114,195,1);">
          <el-form :inline="true" style="margin-bottom: 0;" label-width="50">
            <el-form-item label="经度">
              <el-input v-model="longitude" size="small"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input v-model="latitude" size="small"></el-input>
            </el-form-item>
          </el-form>
          <div class="locationBtn" @click="toLocation">定位</div>
        </div>
      </div>
      <!-- 图片容器 -->
      <transition name="photofade">
        <div v-show="bigShow === true" style="position: fixed;top: 0;left: 0;display:flex;width: 100%;height: 100%;
        background-color: rgba(0,0,0,0.7);z-index: 1000000" @click="bigShow = false">
          <div
              style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;width: 60%;height: 80%"
              @click.stop="">
            <div class="el-icon-close" style="position:absolute;top: -25px;right: -25px;width: 50px;height: 50px;border-radius: 25px;z-index: 2000;
              background-color: white;font-size: 40px;line-height: 50px;text-align: center;cursor: pointer;"
                 @click="bigShow = false"></div>
            <img :src="url" style="width: auto;height: auto;max-height: 100%;max-width: calc(100% + 2px);
                 position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">
          </div>
        </div>
      </transition>
      <!--  样地个体调查列表弹出框 -->
      <div class="dialog transectDialog">
        <el-dialog :close-on-click-modal="false" :visible.sync="transectDialog" title="样地个体调查" class="dialogContent clearfix">
          <div>
            <el-table
                @selection-change="handleSelectionChange"
                ref="singleTable"
                :data="transecttableData"
                :header-row-style="HeaderStyle"
                :row-style='cellStyle'
                style="width: 100%">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  show-overflow-tooltip
                  property="surveyTime"
                  label="调查时间"
                  width="">
              </el-table-column>
              <el-table-column
                  show-overflow-tooltip
                  property="inquirer"
                  label="调查人"
                  width="">
              </el-table-column>
              <el-table-column
                      show-overflow-tooltip
                      property="sampleVo.sampleNumber"
                      label="样地编号"
                      width="">
              </el-table-column>
              <el-table-column
                  show-overflow-tooltip
                  property="sampleVo.species"
                  label="样地物种"
                  width="">
              </el-table-column>
              <el-table-column
                      show-overflow-tooltip
                      property="remark"
                      label="调查备注"
                      width="">
              </el-table-column>
              <el-table-column
                  align="center"
                  label="操作"
                  prop=""
                  width="">
                <template slot-scope="scope">
                  <span  class="pointer" style="cursor: pointer" @click="seeAnimalData(scope.row)">查看</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="transectDialog-footer">
              <span>共{{this.transecttableData.length}}条记录，已选中{{this.selectCount}}</span>
<!--              <el-button  class="dialogBtn " type="primary" @click="batchHandle">批量处理</el-button>-->
              <button class="dialogBtn batchBtn"  @click="batchHandle">批量处理</button>
            </div>
          </div>
          <div class="dialog-footer" slot="footer">
            <div class="footer">
              <div class="paging info">
                <el-pagination
                    :page-size="this.dialogPageSize"
                    :page-sizes="[5, 8]"
                    :total="tableTotal"
                    @current-change="this.handleCurrentChange"
                    @size-change="this.handleSizeChange"
                    background
                    layout="total, sizes, prev, pager, next">
                </el-pagination>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!-- 查看弹出框1   -->
      <div class="dialog">
        <el-dialog :close-on-click-modal="false" :visible.sync="seeDialogFormVisible" title="样地详情" class="dialogContent clearfix">
          <div class="seeDialogTable">
            <div class="seeDialogParent">
              <div class="seeDialogTitle">样地总表</div>
              <div class="parentTable">
                <ul>
                  <li class="tableItem">
                    <div class="itemList">物种</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.species}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">经纬度</div>
                    <div class="itemList">
                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lon + ','}}
                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lat}}
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">调查时间</div>
                    <div class="itemList">
                      <el-tooltip class="item" effect="dark" :content="this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.surveyDay" placement="top">
                        <div class="textOverflow">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.surveyDay}}</div>
                      </el-tooltip>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">调查地点</div>
                    <div class="itemList">
                      <el-tooltip class="item" effect="dark" :content="this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.surveySite" placement="top">
                        <div class="textOverflow">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.surveySite}}</div>
                      </el-tooltip>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">样地编号</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.sampleNumber}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">面积[单位亩]</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.area}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">株距[m]</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.plantSpac}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">行距[m]</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lineSpac}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">造林时间</div>
                    <div class="itemList">
                      <el-tooltip class="item" effect="dark" :content="this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.afforestDate" placement="top">
                        <div class="textOverflow">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.afforestDate}}</div>
                      </el-tooltip>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">坡向</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.aspect}}</div>
                  </li>
                  <li class="tableItem w100">
                    <div class="itemList">样株类型</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.plantType}}</div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="seeDialogChild">
              <div class="seeDialogTitle">样地个体调查表</div>
              <div class="childTable">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="树体" name="tree">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">树势</div>
                        <div class="itemList">{{this.seeDialogData.bodyTrend}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树形</div>
                        <div class="itemList">{{this.seeDialogData.bodyShape}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树高(L)</div>
                        <div class="itemList">{{this.seeDialogData.bodyHeight}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">冠幅(南北,D2)</div>
                        <div class="itemList textOverflow">{{this.seeDialogData.bodyCrownNb}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">冠幅面积</div>
                        <div class="itemList">{{this.seeDialogData.bodyCrownArea}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树冠体积</div>
                        <div class="itemList">{{this.seeDialogData.bodyCrownBulk}}</div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">叶面积指数</div>
                        <div class="itemList">{{this.seeDialogData.bodyAreaIndex}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="枝干" name="branch">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">新梢发枝量</div>
                        <div class="itemList">{{this.seeDialogData.limbXsfzl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">新梢长度</div>
                        <div class="itemList">{{this.seeDialogData.limbXscd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">分枝角度[°]</div>
                        <div class="itemList">{{this.seeDialogData.limbFzjd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">新梢颜色</div>
                        <div class="itemList textOverflow">{{this.seeDialogData.limbXsys}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="叶片" name="leaf">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">叶形</div>
                        <div class="itemList">{{this.seeDialogData.leafShape}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶材</div>
                        <div class="itemList">{{this.seeDialogData.leafTexture}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶面平展度</div>
                        <div class="itemList">{{this.seeDialogData.leafYmpzd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶尖形态</div>
                        <div class="itemList">{{this.seeDialogData.leafYjxt}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="花" name="flower">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">花期</div>
                        <div class="itemList">{{this.seeDialogData.flowerSeason}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">始花期5%-25%</div>
                        <div class="itemList">{{this.seeDialogData.flowerStart}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">盛花期25%-75%</div>
                        <div class="itemList">{{this.seeDialogData.flowerBloom}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">末花期>75%</div>
                        <div class="itemList">{{this.seeDialogData.flowerEnd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">花瓣颜色</div>
                        <div class="itemList">{{this.seeDialogData.flowerHbys}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">
                          <el-tooltip class="item" effect="dark" content="花径[>30朵，平均值]" placement="top">
                            <div class="textOverflow">花径[>30朵，平均值]</div>
                          </el-tooltip>
                        </div>
                        <div class="itemList">{{this.seeDialogData.flowerHj}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">花柱开裂数</div>
                        <div class="itemList">{{this.seeDialogData.flowerHzkls}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">柱头开裂程度</div>
                        <div class="itemList">{{this.seeDialogData.leafTexture}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="果实" name="fruit">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">果形</div>
                        <div class="itemList">{{this.seeDialogData.fruitGx}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果色</div>
                        <div class="itemList">{{this.seeDialogData.fruitGs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">是否有棱</div>
                        <div class="itemList">{{this.seeDialogData.fruitSfyl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜果总重（≥30个）</div>
                        <div class="itemList">{{this.seeDialogData.fruitXgzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果重</div>
                        <div class="itemList">{{this.seeDialogData.fruitDgz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实均匀度</div>
                        <div class="itemList">{{this.seeDialogData.fruitJyd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果皮厚度</div>
                        <div class="itemList">{{this.seeDialogData.fruitHd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果形指数</div>
                        <div class="itemList">{{this.seeDialogData.fruitGxzs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实横径</div>
                        <div class="itemList">{{this.seeDialogData.fruitGshj}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实纵径</div>
                        <div class="itemList">{{this.seeDialogData.fruitGszj}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果种子数</div>
                        <div class="itemList">{{this.seeDialogData.fruitDgzzs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果鲜籽重</div>
                        <div class="itemList">{{this.seeDialogData.fruitDgxzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜籽总重</div>
                        <div class="itemList">{{this.seeDialogData.fruitXzzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜果出籽率</div>
                        <div class="itemList">{{this.seeDialogData.fruitXgczl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干籽总重</div>
                        <div class="itemList">{{this.seeDialogData.fruitGzzl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干仁总重</div>
                        <div class="itemList">{{this.seeDialogData.fruitGrzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干籽出仁率</div>
                        <div class="itemList">{{this.seeDialogData.fruitGzcrl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干出籽率</div>
                        <div class="itemList">{{this.seeDialogData.fruitGzczl}}</div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">种仁含油率</div>
                        <div class="itemList">{{this.seeDialogData.fruitZrhyl}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="产量性状" name="yield">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">座果率</div>
                        <div class="itemList">{{this.seeDialogData.yieldZgl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">结果量</div>
                        <div class="itemList">{{this.seeDialogData.yieldJgl}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="油脂品质性状" name="grease">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">油酸</div>
                        <div class="itemList">{{this.seeDialogData.oilYs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">亚油酸</div>
                        <div class="itemList">{{this.seeDialogData.oilYys}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">硬脂酸</div>
                        <div class="itemList">{{this.seeDialogData.oilYzs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">棕榈酸</div>
                        <div class="itemList">{{this.seeDialogData.oilZyy}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">维生素E</div>
                        <div class="itemList">{{this.seeDialogData.oilWsse}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">角鲨烯</div>
                        <div class="itemList">{{this.seeDialogData.oilJsx}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">甾醇</div>
                        <div class="itemList">{{this.seeDialogData.oilZc}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">多酚</div>
                        <div class="itemList">{{this.seeDialogData.oilDf}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">碘值</div>
                        <div class="itemList">{{this.seeDialogData.oilDz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">色值</div>
                        <div class="itemList">{{this.seeDialogData.oilSz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">比重</div>
                        <div class="itemList">{{this.seeDialogData.oilBz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">酸值</div>
                        <div class="itemList">{{this.seeDialogData.oilSuz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">过氧化值</div>
                        <div class="itemList">{{this.seeDialogData.oilGyhz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">皂化值</div>
                        <div class="itemList">{{this.seeDialogData.saponificationValue}}</div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">不皂化物</div>
                        <div class="itemList">{{this.seeDialogData.oilBzhw}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="附件" name="enclosure">
                    <div class="enclosureItem enclosureMp3 " v-if="this.seeDialogData.fileType === 'mp3'">
                      <el-scrollbar style="height: 100%">
                        <div v-for="(item,index) in this.seeDialogData.fileList" :key="index" class="mp3Item">
                          <audio  controls="controls" :src="fileServerUrl + item.path" style="height: 100%">
                            当前浏览器不支持audio
                          </audio>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div class="enclosureItem enclosureVideo" v-if="this.seeDialogData.fileType === 'video'">
                      <el-scrollbar style="height: 262px">
                        <div v-for="(item,index) in this.seeDialogData.fileList" :key="index" class="videoItem">
                          <video :src="fileServerUrl + item.path" controls="controls" width="100%" height="100%">
                            您的浏览器不支持 video 标签。
                          </video>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div class="enclosureItem enclosureImg" v-if="this.seeDialogData.fileType === 'img'">
                      <el-scrollbar style="height: 180px">
                        <div v-for="(item,index) in this.seeDialogData.fileList" :key="index" class="enclosureImgList">
                          <!--                          :preview-src-list="getSrcList(index)"-->
                          <el-image
                              style="width: 100%; height: 100%"
                              :src="fileServerUrl + item.path"
                          >
                          </el-image>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div v-if="!this.seeDialogData.fileType">
                      暂无数据
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button  class="dialogBtn" type="primary" @click="seeDialogFormVisible = false">关闭</el-button>
          </div>
        </el-dialog>
      </div>
      <!--  专家识别弹出框  -->
      <div class="dialog expertDialog">
        <el-dialog :close-on-click-modal="false" :visible.sync="expertDialogFormVisible" title="专家识别">
          <div>
            <el-form :inline="true" :model="expertData" class="demo-form-inline">
              <el-form-item label="选择专家" style="width: 100%;text-align: center">
                <el-select v-model="expertData.expertName" placeholder="专家名称">
                  <el-option :label="item.name" :value="item.id" v-for="(item,index) in this.expertData.nameData" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button  class="dialogBtn" type="primary" @click="onSubmit">确定</el-button>
            <el-button  class="dialogBtn" type="primary" @click="expertDialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// Api
import commandApi from '../../../api/commandApi'
import GlobalMap from '../../../components/GlobalMap'

// 图片资源
import mapTypeIcon1 from '../../../assets/img/map/dianzi.png'
import mapTypeIcon2 from '../../../assets/img/map/dixing.png'
import mapTypeIcon3 from '../../../assets/img/map/yingxing.png'

import toolIcon1 from '../../../assets/img/map/toolIcon01.png'
import toolIcon2 from '../../../assets/img/map/toolIcon02.png'
import toolIcon3 from '../../../assets/img/map/toolIcon03.png'
import toolIcon4 from '../../../assets/img/map/toolIcon04.png'
import toolIcon5 from '../../../assets/img/map/toolIcon05.png'
import toolIcon6 from '../../../assets/img/map/toolIcon06.png'
import toolIcon7 from '../../../assets/img/map/toolIcon07.png'
import toolIcon8 from '../../../assets/img/map/toolIcon08.png'
import toolIcon9 from '../../../assets/img/map/toolIcon09.png'
import iconMapToPlace from '../../../assets/img/map/mapToPlace.png'

import iconMapToPointOnline from '../../../assets/img/map/mapIcon/13.png'
import iconMapToPointUnline from '../../../assets/img/map/mapIcon/13_unline.png'
import iconMapToTrackStart from '../../../assets/img/map/mapIcon/trackStart.png'
import iconMapToTrackEnd from '../../../assets/img/map/mapIcon/trackEnd .png'
import iconMapToPointEvent from '../../../assets/img/map/mapIcon/28.png'

import Calendar from 'vue-calendar-component'

import Map from 'ol/Map'
import {FullScreen, MousePosition, ScaleLine} from 'ol/control.js'
import {defaults as defaultInteractions, Draw, Modify, Snap} from 'ol/interaction.js'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'
import ImageLayer from 'ol/layer/Image'
import LayerGroup from 'ol/layer/Group'
import {ImageWMS, Vector as VectorSource, XYZ} from 'ol/source.js'
import {Circle as CircleStyle, Fill, Icon, Stroke, Style, Text} from 'ol/style.js'
import Overlay from 'ol/Overlay.js'
import {LineString, Point, Polygon} from 'ol/geom.js'
import {getArea, getLength} from 'ol/sphere.js'
import {unByKey} from 'ol/Observable.js'
import {createStringXY, format as formatCoordinate, toStringHDMS} from 'ol/coordinate'
import BaseLayer from 'ol/layer/Base'
import {fromLonLat} from 'ol/proj.js'
import Feature from 'ol/Feature'
import Select from 'ol/interaction/Select.js'
import Pagination from '../../../components/Pagination'

export default {
  components: {
    Calendar, Pagination
  },
  name: 'command',
  data: function () {
    return {
      fileServerUrl: null,
      // 批量处理的数据
      selectionData: [],
      // 查看弹出框的数据
      seeDialogData: {},
      // 左边样地列表的数据
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      transectTotal: 0,
      // 样地分页数据
      samplePageIndex: 1,
      samplePageSize: 12,
      // 查看弹出框的选项卡数据
      activeName: 'tree',
      selectCount: 0,
      // 表格样式
      cellStyle: {height: '60px', fontSize: '16px'},
      HeaderStyle: {height: '70px', fontSize: '16px'},
      animalId: '',
      formInline: {
        user: '',
        region: '',
        data: [{id: 1, name: 'xx'}, {id: 2, name: 'ss'}]
      },
      // 专家识别表单
      expertData: {
        expertName: '',
        nameData: []
      },
      expertDialogFormVisible: false,
      srcList: [],
      seeDialogFormVisible: false,
      activeNames: ['1'],
      sampleLineData: [],
      dialogPageIndex: 1,
      dialogPageSize: 5,
      tableTotal: 0,
      transecttableData: [],
      transectDialog: false,
      showPersonnel: true, // 左边人员框
      showTransect: false, // 左边样线
      active: true,
      iconShow: false,
      url: '',
      bigShow: false,
      layerCheckList: [],
      // 图层控制器
      layerControl: [],
      clientHeight: '',
      locationShow: false,
      longitude: '',
      latitude: '',
      full: false,
      divheight: null,
      menu: [{
        icon: toolIcon1,
        text: '点'
      }, {
        icon: toolIcon2,
        text: '线'
      }, {
        icon: toolIcon3,
        text: '面'
      }, {
        icon: toolIcon4,
        text: '量距'
      }, {
        icon: toolIcon5,
        text: '量面'
      }, {
        icon: toolIcon6,
        text: '拾取'
      }, {
        icon: toolIcon7,
        text: '定位'
      }, {
        icon: toolIcon8,
        text: ''
      }],
      layer: toolIcon9,
      layerSelect: false,
      mapType: [{
        photo: mapTypeIcon1,
        text: '电子',
        type: 'tdtDZ'
      }, {
        photo: mapTypeIcon2,
        text: '地形',
        type: 'tdtDX'
      }, {
        photo: mapTypeIcon3,
        text: '影像',
        type: 'googleYX'
      }],
      index: 2,
      allTypeShow: false,
      customLayers: [], // 自定义layers
      baseLayers: [],
      toolLayers: [],
      map: null,
      draw: null,
      // 标绘图层
      vrSource_plot: null,
      vrLayer_plot: null,
      helpMsg: '单击绘制',
      // 测量图层
      vrSource_measure: null,
      vrLayer_measure: null,
      // -----测量数值Overlay------
      measureTooltipElement: null, // The measure tooltip element
      measureTooltip: null, // Overlay to show the measurement
      // -----测量帮助提示Overlay------
      helpTooltipElement: null, // The help tooltip element
      helpTooltip: null, // Overlay to show the help messages
      mousePositionControl: null, // 鼠标坐标控件
      // 定位图层
      vrSource_toPlace: null,
      vrLayer_toPlace: null,

      leftShow: true,
      rightShow: false,
      peopleShow: true,
      popupShow: false, // 事件详情

      peopleIndex: null,
      peopleName: '',
      currentUserId: null,

      peopleListData: [], // data人员
      onlineStaffData: [], // 在线人员
      peopleList: [], // 列表人员
      filtInput: '',
      staffHeadOnline: require('../../../assets/img/map/staffHeadOnline.png'),
      staffHeadUnline: require('../../../assets/img/map/staffHeadUnline.png'),

      // 人员统计
      peopleListTJ: [],
      timeTJOptions: [{
        value: 'year',
        label: '年'
      }, {
        value: 'month',
        label: '月'
      }],
      peopleTJVal: '',
      timeTypeTJVal: 'month',
      timeTJVal: new Date(),
      patrolCountData: {}, // 统计数据
      calendarMarkDate: [], // 日历标识数据
      trackDateVal: new Date(), // 轨迹查询日期
      activeTabName: 'track',
      trackListData: [], // 轨迹列表数据
      eventListData: [], // 事件列表数据
      eventData: {}, // 弹窗事件信息
      trackId: null,
      eventId: null,
      trackLineCoords: [], // 轨迹线点位
      isPlay: false,
      trackCoordIndex: 0,
      speed: 3,
      geoMarker: null, // 动画点feature

      timerSenderGetCoord: null, // 定时器获取轨迹下个坐标
      // 巡护图层
      vrSource_staffPoint: null,
      vrLayer_staffPoint: null,
      vrSource_staffTrack: null,
      vrLayer_staffTrack: null,
      vrSource_eventPoint: null,
      vrLayer_eventPoint: null,

      socketServerUrl: null,
      cSocket: null
    }
  },
  // dom加载后调用
  mounted () {
    this.getMapDivHeight()
    this.initMap()
    this.initPatrolData()
    this.timeTJVal = this.dateFormat(new Date(), 'yyyy-MM-dd')

    this.loadStatisticByCondition()
    this.initCalendarMarkDate()

    this.initSocket()
  },
  beforeDestroy () {
    // 回收轨迹播放动画
    clearInterval(this.timerSenderGetCoord)
    window.removeEventListener('resize', this.getheight)
    this.cSocket.close()
  },
  // 创建后调用
  created () {
    this.fileServerUrl = process.env.FILE_SERVER
    this.socketServerUrl = process.env.SOCKET_SERVER
    this.getheight()
    this.getFindAllPages()
    this.clientHeight = `${document.documentElement.clientHeight}` // 获取浏览器可视区域高度
  },
  filters: {
    distanceFilter (value) {
      if (!value) {
        return '0公里'
      }
      // 米转换公里
      let realVal = value.toFixed(2) + '公里'
      return realVal
    },
    durationFilter (value) {
      if (!value) {
        return '0分'
      }
      // 分钟转时分
      let realVal = Math.floor(value / 60) + '小时' + Math.round(value % 60) + '分'
      return realVal
    },
    numberFilter (value) {
      let realVal = ''
      if (value && !isNaN(value)) {
        value = parseFloat(value)
        realVal = value.toFixed(4)
      }
      return realVal
    }
  },
  methods: {
    // 左边样地内容的方法
    handleCurrentPagination (data) {
      this.samplePageIndex = data
      this.getTransectList()
    },
    // 左边全选样地
    handleCheckAllChange (checked) {
      let arr = []
      this.cities.forEach(item => {
        arr.push(item.id)
      })
      this.checkedCities = checked ? arr : []
      this.isIndeterminate = false
      this.loadSurveyMarkerBySamplePlotIds(this.checkedCities)
    },
    // 左边选中样地
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
      this.loadSurveyMarkerBySamplePlotIds(value)
    },
    loadSurveyMarkerBySamplePlotIds (ids) {
      let dom = this
      commandApi.batchBySamplePlotIds({'ids': ids}).then(res => {
        let surveyList = []
        if (res.data.messageType === '0') {
          surveyList = res.data.result
          if (surveyList.length > 0) {
            // 初始化事件图层
            dom.initVrSource_eventPoint()
            for (let i = 0; i < surveyList.length; i++) {
              let row = surveyList[i]
              // map上渲染事件点
              let feature = new Feature()
              let place = fromLonLat([row.lon, row.lat], 'EPSG:4326')
              feature.setGeometry(new Point(place))
              feature.setId('event_' + row.id)
              feature.setProperties(row, true)
              feature.setStyle(dom.eventMarkerStyle(row.name, ''))
              this.vrSource_eventPoint.addFeature(feature)
              if (i === surveyList.length - 1) {
                dom.map.getView().animate({
                  center: place
                })
              }
            }
          }
        }
      })
    },

    // 得到当前页
    handleCurrentChange (val) {
      console.log(val)
      this.dialogPageIndex = val
      this.transecttableData = []
      this.getFindAllPages()
      // this.getFindUser()
    },
    // 得到每页多少条数据
    handleSizeChange (val) {
      console.log(val)
      this.dialogPageSize = val
      this.transecttableData = []
      this.getFindAllPages()
      // this.getFindUser()
    },
    showLeftDiv () {
      this.showTransect = false
      this.showPersonnel = true
      this.leftShow = !this.leftShow
    },
    showPerson () {
      this.showTransect = false
      this.showPersonnel = true
    },
    async showTran () {
      this.showPersonnel = false
      this.showTransect = true
      this.getTransectList()
    },
    async getTransectList () {
      let childrenResule = await commandApi.getSampleFindPage({
        'pageIndex': this.samplePageIndex,
        'pageSize': this.samplePageSize
      })
      // console.log(childrenResule)
      if (childrenResule.data.result && childrenResule.data.result.rows.length > 0) {
        this.cities = childrenResule.data.result.rows
        this.transectTotal = childrenResule.data.result.totalCount
      }
    },
    initSocket () {
      let dom = this
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        let token = localStorage.token
        let sid = null
        if (token) {
          sid = 'web_' + token.substring(token.length - 10)
          this.cSocket = new WebSocket(this.socketServerUrl + sid)
          // 监听socket连接
          this.cSocket.onopen = function () {
            console.log('socket连接open成功!')
          }
          // 监听socket错误信息
          this.cSocket.onerror = function () {
            console.log('socket连接错误')
          }
          // 监听socket消息
          this.cSocket.onmessage = function (msg) {
            console.log(msg.data)
            dom.socketMsgParse(msg.data)
          }
        }
      }
    },

    bigPhotoShow (url) {
      this.bigShow = true
      this.url = url
    },
    getMapDivHeight () {
      window.addEventListener('resize', this.getheight)
    },
    getheight () {
      this.$nextTick(function () {
        this.divheight = this.$refs.ele.offsetHeight // ？px
      })
    },
    peopleLocation (i) {
      let userId = this.peopleList[i].id
      let feature = this.vrSource_staffPoint.getFeatureById(userId)
      if (feature instanceof Feature) {
        let pointCoord = feature.getGeometry().getCoordinates()
        let place = fromLonLat(pointCoord, 'EPSG:4326')
        this.map.getView().animate({
          center: place,
          zoom: 16
        })
      }
    },
    checkLayer (data) {
      let dom = this
      for (let i = 0; i < this.layerControl.length; i++) {
        let source = this.layerControl[i]
        if (data.indexOf(source.id) > -1) {
          source.visible = true
        } else {
          source.visible = false
        }
        dom.map.getLayers().forEach(function (layer) {
          if (source.id === layer.get('layerId')) layer.setVisible(source.visible)
        })
      }
    },
    initCalendarMarkDate () {
      this.calendarMarkDate = []
      let nowDay = this.dateFormat(new Date(), 'yyyy/MM/dd')
      let markObj = {'date': nowDay, 'className': 'markActive'}
      this.calendarMarkDate.push(markObj)
    },
    markerImage (img) {
      let image = new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: img
      })
      return image
    },
    staffMarkerStyle (img, text) {
      let style = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: img
        }),
        text: new Text({
          // 对齐方式
          textAlign: 'center',
          // 文本基线
          textBaseline: 'middle',
          // 字体样式
          font: 'normal 16px 微软雅黑',
          offsetY: 12, // 文本向下移
          // 文本内容
          text: text,
          // 填充样式
          fill: new Fill({
            color: '#aa3300'
          }),
          // 笔触
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          })
        })
      })
      return style
    },
    trackMarkerStyle (img) {
      let style = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: img
        })
      })
      return style
    },
    trackLineStyle () {
      let style = new Style({
        stroke: new Stroke({
          width: 6, color: [237, 212, 0, 0.8]
        })
      })
      return style
    },
    trackGeoStyle (text) {
      let style = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: iconMapToPointOnline
        }),
        text: new Text({
          // 对齐方式
          textAlign: 'center',
          // 文本基线
          textBaseline: 'middle',
          // 字体样式
          font: 'normal 16px 微软雅黑',
          offsetY: 12, // 文本向下移
          // 文本内容
          text: text,
          // 填充样式
          fill: new Fill({
            color: '#aa3300'
          }),
          // 笔触
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          })
        })
      })
      return style
    },

    eventMarkerStyle (text, img) {
      let style = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: iconMapToPointEvent
        }),
        text: new Text({
          // 对齐方式
          textAlign: 'center',
          // 文本基线
          textBaseline: 'middle',
          // 字体样式
          font: 'normal 16px 微软雅黑',
          offsetY: 12, // 文本向下移
          // 文本内容
          text: text,
          // 填充样式
          fill: new Fill({
            color: '#aa3300'
          }),
          // 笔触
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          })
        })
      })
      return style
    },

    /**
       * 实时更新人员位置、状态
       * @param msgStr
       * @returns {boolean}
       */
    socketMsgParse (msgStr) {
      if (msgStr) {
        let msg = msgStr.split(',')
        if (msg.length < 2) return false
        let userId = null
        let account = null
        let userName = ''
        let lon = ''
        let lat = ''
        let item1 = msg[0].split(':')[1]
        if (item1 === 'offLine') {
          account = msg[1].split(':')[1]
        } else if (item1 === 'gather') {
          userName = msg[1].split(':')[1]
          this.tableTotal++
          return false
        } else {
          userId = item1
          userName = msg[1].split(':')[1]
          lon = msg[2].split(':')[1]
          lat = msg[3].split(':')[1]
        }
        // 更新人员列表在线离线
        for (let j = 0; j < this.peopleList.length; j++) {
          let people = this.peopleList[j]
          if (userId === people.id) {
            people.isOnline = true
            // 更新人数
            if (this.onlineStaffData.indexOf(userId) === -1) {
              this.onlineStaffData.push(userId)
            }
            if (people.isOnline) {
              // 置顶在线人员
              let temp = people
              this.peopleList.splice(j, 1)
              this.peopleList.unshift(temp)
            }
            break
          } else if (account === people.account) {
            people.isOnline = false
            userId = people.id
            for (let i = 0; i < this.onlineStaffData.length; i++) {
              if (this.onlineStaffData[i] === userId) {
                this.onlineStaffData.splice(i, 1)
                break
              }
            }
            break
          }
        }
        if (userId) {
          // 更新feature
          let feature = this.vrSource_staffPoint.getFeatureById(userId)
          if (this.checkCoord(lon, lat)) {
            let place = fromLonLat([lon, lat], 'EPSG:4326')
            if (feature) {
              // 移动位置
              feature.setGeometry(new Point(place))
              feature.getStyle().setImage(this.markerImage(iconMapToPointOnline))
            } else {
              feature = new Feature({
                geometry: new Point(place),
                name: lon + ',' + lat,
                population: 4000,
                rainfall: 500
              })
              feature.setId(userId)
              feature.setStyle(this.staffMarkerStyle(iconMapToPointOnline, userName))
              this.vrSource_staffPoint.addFeature(feature)
            }
          }
          if (item1 === 'offLine') {
            if (feature) {
              feature.getStyle().setImage(this.markerImage(iconMapToPointUnline))
            }
          }
          this.map.render()
        }
      }
    },

    // 初始化事件图层
    initVrSource_eventPoint () {
      if (this.vrSource_eventPoint) {
        this.vrSource_eventPoint.clear(false)
      } else {
        this.vrSource_eventPoint = new VectorSource({wrapX: false})
        this.vrLayer_eventPoint = new VectorLayer({
          layerId: 'vrLayer_eventPoint',
          title: '事件图层',
          source: this.vrSource_eventPoint,
          zIndex: 5
        })
        this.map.addLayer(this.vrLayer_eventPoint)
        // 定义select控制器，点击标注后的事件
        let selectClick = new Select()
        // map加载该控件，默认是激活可用的
        this.map.addInteraction(selectClick)
        let dom = this
        selectClick.on('select', function (e) {
          if (e.selected && e.selected.length > 0) {
            let feature = e.selected[0]
            if (feature.getId().indexOf('event_') > -1) {
              dom.clickLoadEventData(feature)
            }
          }
        })
      }
    },
    clickLoadEventData (feature, itemId) {
      // console.log(feature)
      this.eventId = itemId
      let popupDivElm = document.getElementById('popupDiv')
      let popup = this.map.getOverlayById('eventData_' + feature.getId())
      if (!(popup instanceof Overlay)) {
        popup = new Overlay({
          id: 'eventData_' + feature.getId(),
          element: popupDivElm,
          positioning: 'bottom-center',
          stopEvent: true,
          // insertFirst: false,
          offset: [5, -50]
        })
        this.map.addOverlay(popup)
      }
      let coordinate = feature.getGeometry().getLastCoordinate()
      popup.setPosition(coordinate)
      this.popupShow = true
      this.eventData = feature.getProperties()
      // console.log(this.eventData)
      // view居中
      // 23.18922 - 23.20347 =
      let centerCoord = coordinate.concat()
      // centerCoord[1] = centerCoord[1] + 0.04
      let place = fromLonLat(centerCoord, 'EPSG:4326')
      this.map.getView().animate({
        center: place
      })
    },

    // 初始化轨迹图层
    initVrSource_staffTrack () {
      if (this.vrSource_staffTrack) {
        if (this.isPlay) this.stopTrackPlay()
        this.vrSource_staffTrack.clear(false)
      } else {
        this.vrSource_staffTrack = new VectorSource({wrapX: false})
        this.vrLayer_staffTrack = new VectorLayer({
          layerId: 'vrLayer_staffTrack',
          title: 'staff轨迹图层',
          source: this.vrSource_staffTrack,
          zIndex: 5
        })
        this.map.addLayer(this.vrLayer_staffTrack)
      }
    },
    trackShow (data) {
      if (data) {
        let startPoint = null
        let trackLine = []
        let endPoint = null
        if (data.gpsVoList.length > 0) {
          trackLine = data.gpsVoList
          startPoint = trackLine[0]
          endPoint = trackLine[trackLine.length - 1]
        }
        // 重复点击轨迹
        // if (this.trackId !== data.id) {
        this.trackId = data.id
        // 初始化轨迹source
        this.initVrSource_staffTrack()
        if (startPoint) {
          let place = fromLonLat([startPoint.lon, startPoint.lat], 'EPSG:4326')
          let feature = new Feature({
            geometry: new Point(place)
          })
          feature.setId('startPoint')
          feature.setStyle(this.trackMarkerStyle(iconMapToTrackStart))
          this.vrSource_staffTrack.addFeature(feature)
        }
        this.trackLineCoords = []
        if (trackLine.length > 0) {
          let coordinates = []
          for (let j = 0; j < trackLine.length; j++) {
            let coordinate = [trackLine[j].lon, trackLine[j].lat]
            let obj = {'time': trackLine[j].sendTime.split(' ')[1], 'coordinate': coordinate}
            this.trackLineCoords.push(obj)
            coordinates.push(coordinate)
          }
          let routeFeature = new Feature({
            'geometry': new LineString(coordinates)
          })
          routeFeature.setId('trackLine')
          routeFeature.setStyle(this.trackLineStyle())
          this.vrSource_staffTrack.addFeature(routeFeature)
        }
        if (endPoint) {
          let place = fromLonLat([endPoint.lon, endPoint.lat], 'EPSG:4326')
          let feature = new Feature({
            geometry: new Point(place)
          })
          feature.setId('endPoint')
          feature.setStyle(this.trackMarkerStyle(iconMapToTrackEnd))
          this.vrSource_staffTrack.addFeature(feature)
        }
        // 显示图层
        this.vrLayer_staffTrack.setVisible(true)
        // }
        // view居中
        if (startPoint) {
          let place = fromLonLat([startPoint.lon, startPoint.lat], 'EPSG:4326')
          this.map.getView().animate({
            center: place
          })
        }
      }
    },

    timerGetCoord () {
      // console.log(this.trackCoordIndex)
      let place = fromLonLat(this.trackLineCoords[this.trackCoordIndex].coordinate, 'EPSG:4326')
      this.geoMarker.setGeometry(new Point(place))
      this.geoMarker.setStyle(this.trackGeoStyle(this.trackLineCoords[this.trackCoordIndex].time))
      this.map.render()
      this.trackCoordIndex = this.trackCoordIndex + 1
    },
    moveFeature (event) {
      if (this.isPlay) {
        if (this.trackCoordIndex >= this.trackLineCoords.length) {
          this.stopTrackPlay(true)
        }
      }
    },
    trackPlay (data) {
      if (this.vrSource_staffTrack.getFeatures().length === 0) this.trackShow(data)
      if (this.isPlay) {
        this.stopTrackPlay(false)
      } else {
        this.isPlay = true

        // 隐藏实时人员定位图层
        this.layerCheckList.splice(this.layerCheckList.indexOf('vrLayer_staffPoint'), 1)
        this.vrLayer_staffPoint.setVisible(false)
        this.vrLayer_staffTrack.setVisible(true)

        // 初始geo动画点
        this.geoMarker = new Feature()
        let place = fromLonLat(this.trackLineCoords[0].coordinate, 'EPSG:4326')
        this.geoMarker.setGeometry(new Point(place))
        this.geoMarker.setId('geoPoint')
        this.geoMarker.setStyle(this.trackGeoStyle(this.trackLineCoords[0].time))
        this.vrSource_staffTrack.addFeature(this.geoMarker)
        // view居中
        this.map.getView().animate({
          center: place
        })

        if (this.trackLineCoords.length > 1) this.speedChange()
        // 事件在地图渲染时都会触发
        this.map.on('postcompose', this.moveFeature)
        this.map.render()
      }
    },
    stopTrackPlay (ended) {
      this.isPlay = false
      // 显示实时人员定位图层
      this.layerCheckList.push('vrLayer_staffPoint')
      this.vrLayer_staffPoint.setVisible(true)
      /* let coord = ended ? this.trackLineCoords[this.trackLineCoords.length - 1].coordinate : this.trackLineCoords[0].coordinate;
              (this.geoMarker.getGeometry()).setCoordinates(coord) */
      this.vrSource_staffTrack.removeFeature(this.geoMarker)
      this.vrLayer_staffTrack.setVisible(false)
      this.trackCoordIndex = 0
      // remove listener
      clearInterval(this.timerSenderGetCoord)
      this.map.un('postcompose', this.moveFeature)
      this.map.render()
    },
    speedChange () {
      let val = 3000 / (this.speed)
      if (this.timerSenderGetCoord) clearInterval(this.timerSenderGetCoord)
      if (this.isPlay) {
        this.timerSenderGetCoord = setInterval(this.timerGetCoord, val)
      }
    },

    statisticConditionChange () {
      this.loadStatisticByCondition()
    },
    drawEchart () {
      let Chart = this.$echarts.init(document.getElementById('echart'))
      Chart.clear()
      Chart.hideLoading()
      if (this.patrolCountData.nameData) {
        // 绘制图表
        Chart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          noDataLoadingOption: {
            text: '暂无数据',
            effect: 'bubble',
            effectOption: {
              effect: {
                n: 0
              }
            }
          },
          calculable: true,
          legend: {
            data: ['里程(千米)', '时间(分钟)', '次数(次)'],
            textStyle: {color: '#fff'}
          },
          xAxis: [
            {
              type: 'category',
              data: this.patrolCountData.nameData,
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff', // 左边线的颜色
                  width: '1'// 坐标线的宽度
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff', // 左边线的颜色
                  width: '0'// 坐标线的宽度
                }
              }
            }
          ],
          series: [
            {
              name: '里程(千米)',
              type: 'bar',
              data: this.patrolCountData.distanceData,
              // 颜色
              itemStyle: {
                normal: {
                  color: '#3AD0F9'
                }
              }
            },
            {
              name: '时间(分钟)',
              type: 'line',
              data: this.patrolCountData.durationData,
              // 颜色
              itemStyle: {
                normal: {
                  color: '#78FD84'
                }
              }
            },
            {
              name: '次数(次)',
              type: 'line',
              data: this.patrolCountData.countData,
              // 颜色
              itemStyle: {
                normal: {
                  color: '#424bfd'
                }
              }
            }
          ]
        })
      } else {
        Chart.setOption({
          title: {
            show: true,
            textStyle: {
              color: 'grey',
              fontSize: 20
            },
            text: '暂无数据',
            left: 'center',
            top: 'center'
          },
          xAxis: {
            show: false
          },
          yAxis: {
            show: false
          },
          series: []
        })
      }
    },
    loadStatisticByCondition () {
      let params = {
        'dateWay': this.timeTypeTJVal,
        'dateVal': this.timeTJVal,
        'userId': this.peopleTJVal
      }
      commandApi.findPatrolStatistics(params).then((res) => {
        this.patrolCountData = {}
        if (res.data.messageType === '0') {
          let result = res.data.result
          if (result && result.length > 0) {
            let nameData = []
            let distanceData = []
            let durationData = []
            let countData = []
            for (let i = 0; i < result.length; i++) {
              nameData.push(result[i][0])
              distanceData.push(Math.ceil(result[i][1]))
              durationData.push(Math.ceil(result[i][2]))
              countData.push(Math.ceil(result[i][3]))
            }
            this.patrolCountData.nameData = nameData
            this.patrolCountData.distanceData = distanceData
            this.patrolCountData.durationData = durationData
            this.patrolCountData.countData = countData
          }
        }
        this.drawEchart()
      })
    },

    peopleClick (i) {
      if (this.peopleIndex !== null) {
        this.peopleList[this.peopleIndex].active = false
      }
      this.peopleList[i].active = true
      this.rightShow = true
      // 重复点击
      if (this.peopleIndex !== i) {
        this.trackId = 0
        // 初始化轨迹source
        this.initVrSource_staffTrack()
        // 初始化事件图层source
        this.initVrSource_eventPoint()

        this.peopleName = this.peopleList[i].name
        this.currentUserId = this.peopleList[i].id
        this.peopleTJVal = this.currentUserId
        // 加载统计
        this.loadStatisticByCondition()
        // 加载日历情况
        this.initCalendarMarkDate()
        this.loadCalendarByCondition()
        // 加载默认当天轨迹和事件记录
        this.loadTrackEventByCondition()
      }
      this.peopleIndex = i
    },

    loadCalendarByCondition () {
      if (this.currentUserId) {
        let params = {
          'userId': this.currentUserId,
          'dateWay': 'month',
          'dateVal': this.dateFormat(this.trackDateVal, 'yyyy-MM-dd'),
          'isFindGps': false
        }
        let dom = this
        commandApi.findTasksAndGps(params).then((res) => {
          if (res.status === 200) {
            for (let i = 0; i < res.data.result.length; i++) {
              let day = res.data.result[i].startDate
              let dayStr = day.substr(0, 10).replace(/-/g, '/')
              let markObj = {date: dayStr, className: 'markIsPatrol'}
              dom.calendarMarkDate.push(markObj)
            }
          }
        })
      }
    },
    loadTrackEventByCondition () {
      if (this.currentUserId) {
        let date = this.dateFormat(this.trackDateVal, 'yyyy-MM-dd')
        let dom = this
        let taskParams = {
          'userId': this.currentUserId,
          'dateWay': 'day',
          'dateVal': date,
          'isFindGps': true
        }
        commandApi.findTasksAndGps(taskParams).then((res) => {
          if (res.status === 200) {
            dom.trackListData = []
            if (res.data.result && res.data.result.length > 0) {
              dom.trackListData = res.data.result
              dom.activeTabName = 'track'
            }
          }
        })
        commandApi.findOilteaSurveyByDayVal({userId: this.currentUserId, dateVal: date}).then((res) => {
          if (res.status === 200) {
            dom.eventListData = []
            if (res.data.result && res.data.result.length > 0) {
              dom.activeTabName = 'event'
              let rows = res.data.result
              for (let i = 0; i < rows.length; i++) {
                let row = rows[i]

                // map上渲染事件点
                let feature = new Feature()
                let place = fromLonLat([row.lon, row.lat], 'EPSG:4326')
                feature.setGeometry(new Point(place))
                feature.setId('event_' + row.id)
                feature.setProperties(row, true)
                feature.setStyle(this.eventMarkerStyle(row.name, ''))
                this.vrSource_eventPoint.addFeature(feature)

                row.feature = feature
                dom.eventListData.push(row)
              }
            }
          }
        })
      }
    },
    clickDay (data) {
      for (let i = 0; i < this.calendarMarkDate.length; i++) {
        let markDate = this.calendarMarkDate[i]
        if (markDate.className === 'markActive') {
          markDate.date = data
        }
      }
      if (this.trackDateVal.getTime() !== new Date(data).getTime()) {
        this.trackId = 0
        // 初始化轨迹source
        this.initVrSource_staffTrack()
        // 初始化事件图层source
        this.initVrSource_eventPoint()

        this.trackDateVal = new Date(data)
        this.loadTrackEventByCondition()
      }
    },
    changeDate (data) {
      for (let i = 0; i < this.calendarMarkDate.length; i++) {
        let markDate = this.calendarMarkDate[i]
        if (markDate.className === 'markActive') {
          markDate.date = data
        }
      }
      if (this.trackDateVal.getTime() !== new Date(data).getTime()) {
        this.trackId = 0
        // 初始化轨迹source
        this.initVrSource_staffTrack()
        // 初始化事件图层source
        this.initVrSource_eventPoint()

        this.trackDateVal = new Date(data)
        this.loadTrackEventByCondition()
        this.loadCalendarByCondition()
      }
    },

    filterStaff (e) {
      let str = this.filtInput
      let tempList = this.peopleListData.slice()
      this.peopleList = []
      for (let i = 0; i < tempList.length; i++) {
        let userName = tempList[i].name.toLowerCase()
        if (userName.indexOf(str.toLowerCase()) > -1) {
          this.peopleList.push(tempList[i])
        }
      }
    },
    initPatrolData () {
      let dom = this
      dom.layerControl.push({id: 'vrLayer_staffPoint', name: '人员位置'})
      dom.layerCheckList.push('vrLayer_staffPoint')
      dom.layerControl.push({id: 'vrLayer_eventPoint', name: '调查事件'})
      dom.layerCheckList.push('vrLayer_eventPoint')

      // 加载人员列表
      commandApi.findPersonnel({}).then((res) => {
        if (res.data.result && res.data.result.length > 0) dom.peopleListData = res.data.result
        dom.peopleList = dom.peopleListData.slice()
        dom.peopleList.forEach(function (people, i) {
          // people.isOnline = false
          if (people.isOnline) {
            dom.onlineStaffData.push(people.id)
          }
          people.active = false
        })
        dom.peopleListTJ = dom.peopleListData.slice()
        dom.peopleListTJ.unshift({'id': '', 'name': '全部'})
      })
    },

    dateFormat (date, format) {
      let dateStr = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S+': date.getMilliseconds()
      }
      if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (let k in dateStr) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(RegExp.$1, RegExp.$1.length === 1
            ? dateStr[k] : ('00' + dateStr[k]).substr(('' + dateStr[k]).length))
        }
      }
      return format
    },
    parseDate (str, fmt) {
      fmt = fmt || 'yyyy-MM-dd'
      let obj = {y: 0, M: 1, d: 0, H: 0, h: 0, m: 0, s: 0, S: 0}
      fmt.replace(/([^yMdHmsS]*?)(([yMdHmsS])\3*)([^yMdHmsS]*?)/g, function (m, $1, $2, $3, $4, idx, old) {
        str = str.replace(new RegExp($1 + '(\\d{' + $2.length + '})' + $4), function (_m, _$1) {
          obj[$3] = parseInt(_$1)
          return ''
        })
        return ''
      })
      obj.M-- // 月份是从0开始的，所以要减去1
      let date = new Date(obj.y, obj.M, obj.d, obj.H, obj.m, obj.s)
      if (obj.S !== 0) date.setMilliseconds(obj.S) // 如果设置了毫秒
      return date
    },

    buildMapLayer (data) {
      let mapLayer = data
      let layer
      switch (mapLayer.layerType) {
        // 矢量
        case 0 :
          break
          // 瓦片
        case 1:
          break
          // WMS
        case 2:
          let wmsSource = new ImageWMS({
            url: mapLayer.kmlUrl,
            params: {'LAYERS': mapLayer.layerKey, 'SRS': 'EPSG:4326'},
            serverType: 'geoserver'
          })
          layer = new ImageLayer({
            layerId: mapLayer.id,
            title: mapLayer.name,
            source: wmsSource,
            zIndex: mapLayer.sortNo,
            visible: mapLayer.visible
          })
          break
      }
      if (layer) {
        this.customLayers.push(layer)
        this.map.addLayer(layer)
      }
    },

    initMap () {
      let mapLayers = []
      // 构建底图数据源
      for (let i = 0; i < GlobalMap.mapTypeSource.length; i++) {
        this.baseLayers.push(new TileLayer({
          layerId: GlobalMap.mapTypeSource[i].layerId,
          source: new XYZ({
            url: GlobalMap.mapTypeSource[i].url
          }),
          zIndex: GlobalMap.mapTypeSource[i].zIndex,
          visible: GlobalMap.mapTypeSource[i].visible
          // extent: [left, bottom, right, top]
          // minResolution，图层可见的最小分辨率，当图层的缩放级别小于这个分辨率时，图层就会隐藏；
          // maxResolution，图层可见的最大分辨率，当图层的缩放级别等于或超过这个分辨率时，图层就会隐藏。
        })
        )
      }
      let baseLayerGroup = new LayerGroup({
        layers: this.baseLayers
      })
      mapLayers.push(baseLayerGroup)

      // 矢量标绘图层初始
      this.vrSource_plot = new VectorSource({wrapX: false})
      this.vrLayer_plot = new VectorLayer({
        layerId: 'vrLayer_plot',
        title: '标绘图层',
        source: this.vrSource_plot,
        style: new Style({
          // 矢量图层填充颜色,以及透明度
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          // 边界样式
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          // 文本样式
          text: new Text({
            font: '12px Calibri,sans-serif',
            fill: new Fill({
              color: '#000'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 3
            })
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        }),
        zIndex: 2
      })
      this.toolLayers.push(this.vrLayer_plot)
      // 测量图层初始
      this.vrSource_measure = new VectorSource({wrapX: false})
      this.vrLayer_measure = new VectorLayer({
        layerId: 'vrLayer_measure',
        title: '测量图层',
        source: this.vrSource_measure,
        style: new Style({
          // 矢量图层填充颜色,以及透明度
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          // 边界样式
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          // 文本样式
          text: new Text({
            font: '12px Calibri,sans-serif',
            fill: new Fill({
              color: '#000'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 3
            })
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        }),
        zIndex: 2
      })
      this.toolLayers.push(this.vrLayer_measure)
      // 定位图层初始
      this.vrSource_toPlace = new VectorSource({features: []})
      this.vrLayer_toPlace = new VectorLayer({
        layerId: 'vrLayer_toPlace',
        title: '定位图层',
        zIndex: 2,
        source: this.vrSource_toPlace
      })
      this.toolLayers.push(this.vrLayer_toPlace)

      let toolLayerGroup = new LayerGroup({
        layers: this.toolLayers
      })
      mapLayers.push(toolLayerGroup)

      // 监听鼠标位置控件
      this.mousePositionControl = new MousePosition({
        coordinateFormat: createStringXY(5),
        projection: 'EPSG:4326',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
      })

      this.map = new Map({
        target: 'mapGeo',
        controls: ([
          // new ZoomSlider({})
          new FullScreen({
            target: 'mapFull',
            label: '',
            labelActive: '',
            tipLabel: '点击全屏地图'
          }),
          // 比例尺
          new ScaleLine({
            // className: '',
            target: 'scaleLineControl',
            units: 'metric'
          }),
          this.mousePositionControl
        ]),
        nteractions: defaultInteractions({altShiftDragRotate: false, PinchRotate: false, doubleClickZoom: false}), // 取消旋转
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true,
        layers: mapLayers,
        view: GlobalMap.mapView
      })

      // 加入巡护图层
      this.vrSource_staffPoint = new VectorSource({wrapX: false})
      this.vrLayer_staffPoint = new VectorLayer({
        layerId: 'vrLayer_staffPoint',
        title: 'staff点位图层',
        source: this.vrSource_staffPoint,
        zIndex: 5
      })
      this.map.addLayer(this.vrLayer_staffPoint)

      this.map.on('pointermove', this.pointerMovePointer)
    },

    mapTypeSelect (i) {
      this.index = i
    },

    getCustomLayerById (id) {
      for (let i = 0; i < this.customLayers.length; i++) {
        if (this.customLayers[i] && this.customLayers[i].values_.layerId === id) {
          return this.customLayers[i]
        }
      }
    },

    // 图层置顶
    layerTop (mapLayer, isVisible) {
      let maxZIndex = 2
      this.map.getLayers().forEach(function (layer, i) {
        if (layer instanceof LayerGroup) {
          layer.getLayers().forEach(function (sublayer, j) {
            let zIndex = sublayer.getZIndex()
            if (zIndex && zIndex > maxZIndex) maxZIndex = zIndex
          })
        } else if (layer instanceof BaseLayer) {
          let zIndex = layer.getZIndex()
          if (zIndex && zIndex > maxZIndex) maxZIndex = zIndex
        }
      })
      if (mapLayer.getZIndex() !== maxZIndex) {
        mapLayer.setVisible(isVisible)
        mapLayer.setZIndex(maxZIndex + 1)
      }
    },

    // 切换比例尺
    fastScaleSkip (scaleLevelVal) {
      if (scaleLevelVal && scaleLevelVal > 0) {
        this.map.getView().animate({
          zoom: scaleLevelVal
        })
      }
    },

    // 格式化距离
    formatDist (line) {
      let length = getLength(line, {projection: 'EPSG:4326'})
      let output
      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) +
            ' ' + 'km'
      } else {
        output = (Math.round(length * 100) / 100) +
            ' ' + 'm'
      }
      return output
    },

    // 格式化面积
    formatArea (polygon) {
      let area = getArea(polygon, {projection: 'EPSG:4326'})
      let output
      if (area > 10000) {
        output = (Math.round(area / 1000000 * 100) / 100) +
            ' ' + 'km<sup>2</sup>'
      } else {
        output = (Math.round(area * 100) / 100) +
            ' ' + 'm<sup>2</sup>'
      }
      return output
    },

    // 悬浮提示
    createHelpTooltip () {
      if (this.helpTooltipElement) {
        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement)
      }
      this.helpTooltipElement = document.createElement('div')
      this.helpTooltipElement.className = 'tooltip hidden'
      this.helpTooltip = new Overlay({
        element: this.helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left'
      })
      this.map.addOverlay(this.helpTooltip)
    },

    // 量距量面计量提示
    createMeasureTooltip () {
      if (this.measureTooltipElement) {
        this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement)
      }
      this.measureTooltipElement = document.createElement('div')
      this.measureTooltipElement.className = 'tooltip tooltip-measure'
      this.measureTooltip = new Overlay({
        element: this.measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
      })
      this.map.addOverlay(this.measureTooltip)
    },

    // 单击事件显示坐标
    singleclickGetCoor (evt) {
      let dom = this
      if (evt.dragging) {
        return
      }
      let coordinate = evt.coordinate
      let hdms = toStringHDMS(coordinate)
      let container = document.createElement('div')
      container.className = 'ol-popup'
      let content = document.createElement('div')
      let closer = document.createElement('i')
      let top = document.createElement('div')
      content.className = 'ol-popup-code'
      closer.className = 'ol-popup-closer el-icon-close'
      top.className = 'popup-triangle-top'
      // content.innerHTML = '<p>拾取坐标：</p><code>经纬:' + hdms.substring(hdms.indexOf('N') + 1, hdms.length) + ' ' + hdms.substring(0, hdms.indexOf('N ') + 1) + '</code>' +
      //   '<br /><code>' + formatCoordinate(coordinate, '84坐标:{x},{y}', 5) + '</code>'
      content.innerHTML = '<p style="position: relative;margin-bottom:10px;left:3px;top: 3px;background-color: rgba(250, 250, 250, 0.2);width:calc(100% - 3px);height:30px;line-height: 30px;padding-left: 10px;box-sizing: border-box">拾取坐标：</p><code style="padding: 0 10px;font-size: 1.8rem;line-height: 30px">经纬:' + hdms.substring(hdms.indexOf('N') + 1, hdms.length) + ' ' + hdms.substring(0, hdms.indexOf('N ') + 1) + '</code>' +
          '<br /><code style="padding: 0 10px;font-size: 1.8rem;line-height: 28px">' + formatCoordinate(coordinate, '84坐标:{x},{y}', 5) + '</code>'
      container.appendChild(closer)
      container.appendChild(content)
      container.appendChild(top)

      let overlay = new Overlay(({
        position: coordinate,
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      }))
      closer.onclick = function () {
        dom.map.removeOverlay(overlay)
        closer.blur()
        return false
      }
      dom.map.addOverlay(overlay)
      dom.map.removeOverlay(dom.helpTooltip)

      dom.map.getView().animate({
        center: coordinate
      })
      dom.map.un('singleclick', dom.singleclickGetCoor)
    },

    // 事件:鼠标移动帮助提示
    pointerMoveHandler (evt) {
      if (evt.dragging) {
        return
      }
      let helpMsg = this.helpMsg
      this.helpTooltipElement.innerHTML = helpMsg
      this.helpTooltip.setPosition(evt.coordinate)
      this.helpTooltipElement.classList.remove('hidden')
    },

    // 事件:鼠标移动至有内容处变手型
    pointerMovePointer (evt) {
      if (evt.dragging) {
        return
      }
      let pixel = this.map.getEventPixel(evt.originalEvent)
      let hit = this.map.hasFeatureAtPixel(pixel, 0)
      this.map.getTargetElement().style.cursor = hit ? 'pointer' : ''
    },

    // 切换底图
    switchMap (source) {
      for (let i = 0; i < this.baseLayers.length; i++) {
        if (this.baseLayers[i].values_.layerId === source) {
          this.baseLayers[i].values_.visible = true
        } else {
          this.baseLayers[i].values_.visible = false
        }
      }
      this.map.render()
    },
    // 标绘工具
    toolPlot (typeShp) {
      // 置顶操作图层
      this.layerTop(this.vrLayer_plot, true)

      let msg = typeShp === 'Point' ? '单击标绘' : '长按标绘'
      this.helpMsg = msg
      this.createHelpTooltip()
      let mapMove = this.map.on('pointermove', this.pointerMoveHandler)

      this.draw = new Draw({
        source: this.vrSource_plot,
        type: typeShp,
        freehand: true
      })
      this.map.addInteraction(this.draw)
      this.snap = new Snap({source: this.vrSource_plot})
      this.map.addInteraction(this.snap)

      let dom = this
      this.draw.on('drawend', function () {
        dom.map.removeInteraction(dom.draw)
        dom.draw = null
        dom.map.removeInteraction(dom.snap)
        dom.snap = null

        unByKey(mapMove)
        // 清掉overlay，里面的dom也会清掉
        dom.map.removeOverlay(dom.helpTooltip)
      }, this)

      this.modify = new Modify({source: this.vrSource_plot})
      this.map.addInteraction(this.modify)
    },

    // 测量工具
    measure (typeMeasure) {
      // 置顶操作图层
      this.layerTop(this.vrLayer_measure, true)

      this.createMeasureTooltip()
      this.createHelpTooltip()

      let dom = this // 引用外部

      this.helpMsg = '单击测量'
      // 绑定鼠标悬浮监听
      let onMove = this.map.on('pointermove', this.pointerMoveHandler)

      if (this.draw) {
        this.map.removeInteraction(this.draw)
        this.draw = null
      }
      this.draw = new Draw({
        source: this.vrSource_measure,
        type: typeMeasure,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new Stroke({
            color: '#ff0307',
            lineDash: [10, 10],
            width: 2
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.7)'
            }),
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            })
          })
        })
      })
      this.map.addInteraction(this.draw)

      let listener
      this.draw.on('drawstart', function (evt) {
        dom.sketch = evt.feature
        let tooltipCoord = evt.coordinate

        listener = dom.sketch.getGeometry().on('change', function (evt) {
          let geom = evt.target
          let output
          if (geom instanceof Polygon) {
            output = dom.formatArea(geom)
            tooltipCoord = geom.getInteriorPoint().getCoordinates()
          } else if (geom instanceof LineString) {
            output = dom.formatDist(geom)
            tooltipCoord = geom.getLastCoordinate()
          }
          dom.measureTooltipElement.innerHTML = output
          dom.measureTooltip.setPosition(tooltipCoord)
        })
      }, this)

      this.draw.on('drawend', function () {
        dom.measureTooltipElement.className = 'tooltip tooltip-static'
        dom.measureTooltip.setOffset([0, -7])
        dom.sketch = null
        dom.measureTooltipElement = null
        dom.createMeasureTooltip()
        unByKey(listener)

        unByKey(onMove)
        dom.map.removeInteraction(dom.draw)
        // 清掉overlay，里面的dom也会清掉
        dom.map.removeOverlay(dom.helpTooltip)
      }, this)
    },

    // 拾取坐标
    pickupCoord () {
      this.helpMsg = '单击拾取'
      this.createHelpTooltip()
      this.map.on('pointermove', this.pointerMoveHandler)
      this.map.on('singleclick', this.singleclickGetCoor)
    },

    // 定位
    toLocation () {
      // 置顶操作图层
      this.layerTop(this.vrLayer_toPlace, true)

      let place = fromLonLat([this.longitude, this.latitude], 'EPSG:4326')
      let iconStyle = new Style({
        image: new Icon(({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: iconMapToPlace
        }))
      })
      let iconFeature = new Feature({
        geometry: new Point(place),
        name: this.longitude + ',' + this.latitude,
        population: 4000,
        rainfall: 500
      })
      iconFeature.setStyle(iconStyle)
      this.vrSource_toPlace.addFeature(iconFeature)
      this.map.getView().animate({
        center: place
      })
    },

    // 坐标校验
    checkCoord (lon, lat) {
      let lonReg = /^(|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,20})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,20}|180)$/
      let latReg = /^(|\+)?([0-8]?\d{1}\.\d{0,20}|90\.0{0,20}|[0-8]?\d{1}|90)$/
      if (lonReg.test(lon) && latReg.test(lat)) {
        return true
      } else {
        return false
      }
    },
    clickTotal () {
      this.active = !this.active
      this.peopleShow = !this.peopleShow
    },
    async getFindAllPages () {
      this.transecttableData = []
      // this.tableTotal = 0
      let data = await commandApi.getFindPage({
        'isFindSample': true,
        'status': false,
        'pageIndex': this.dialogPageIndex,
        'pageSize': this.dialogPageSize
      })
      if (data.status === 200 && data.data.result.rows.length > 0) {
        this.transecttableData = data.data.result.rows
        this.tableTotal = data.data.result.totalCount
        // console.log(this.transecttableData)
      }
    },
    async clickSample () {
      this.transectDialog = true
      // console.log(data)

      this.getFindAllPages()
    },
    seeAnimalData (data) {
      console.log(data)
      this.seeDialogData = {}
      this.seeDialogData = data
      this.seeDialogFormVisible = true
    },
    // 点击专家识别
    async expertDistinguish (data) {
      this.expertDialogFormVisible = true
      let experData = await commandApi.findSpecialist()
      if (experData.status === 200 && experData.data.result.length > 0) {
        this.expertData.nameData = experData.data.result
      }
      this.animalId = data.id
    },
    // 专家识别表单 提交
    async onSubmit () {
      // console.log('submit!')
      // console.log(this.animalId)
      // console.log(this.expertData.expertName)
      if (this.animalId && this.expertData.expertName) {
        let sendData = await commandApi.sendDiscern({
          'animalId': this.animalId,
          'expertId': this.expertData.expertName
        })
        if (sendData.status === 200) {
          this.expertDialogFormVisible = false
          this.$message({
            message: '成功添加专家',
            type: 'success'
          })
        }
      }
    },
    // el-image组件大图预览不能定位当前图片的处理
    getSrcList (index) {
      return this.srcList.slice(index).concat(this.srcList.slice(0, index))
    },
    // 弹出框的数据被选中
    handleSelectionChange (selection) {
      this.selectionData = []
      console.log(selection)
      this.selectCount = selection.length
      this.selectionData = selection
    },
    // 查看弹出框的选项卡
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    // 弹框中的批量处理
    async batchHandle () {
      if (this.selectionData.length > 0) {
        let batIds = []
        this.selectionData.forEach(item => {
          batIds.push(item.id)
        })
        let batResult = await commandApi.batchProcessing({
          'ids': batIds
        })
        if (batResult.status === 200) {
          this.$message({
            message: '处理成功',
            type: 'success'
          })
          this.getFindAllPages()
        }
      } else {
        this.$message.error('请勾选要处理的数据')
      }
    }
  }
}

</script>

<style scoped lang="less">
  /*background: rgba(24, 32, 45, 0.2)*/
  .full {
    background: url("../../../assets/img/map/small.png") 6px 6px no-repeat;
  }

  .small {
    background: url("../../../assets/img/map/full.png") 6px 6px no-repeat;
  }

  .mapTools {
    position: absolute;
    z-index: 100;
    /*right: 25%;*/
    top: 20px;
    right: 1%;
    margin-right: 50px;
    /*width: 560px;*/
    height: 30px;
    display: flex;
    /*& /deep/ .dropdown-ctrl .el-button--primary {*/
    /*  font-size: 16px;*/
    /*  background: rgb(15, 114, 195);*/
    /*  border: none;*/
    /*  border-right: 1px solid rgba(255, 255, 255, 0.40);*/
    /*  !*background:rgba(15,114,195,1);*!*/
    /*  !*background-color: rgba(88, 190, 186, 0.6);*!*/
    /*  !*border-color: rgba(88, 190, 186, 0.6)*!*/
    /*}*/

    /*& /deep/ .dropdown-ctrl .el-button--primary:hover {*/
    /*  background: none;*/
    /*}*/

    /*& /deep/ .dropdown-ctrl .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {*/
    /*  !*color: rgb(88, 190, 186);*!*/
    /*  !*background-color: rgb(88, 190, 186);*!*/
    /*  background: #0d7ef6*/
    /*}*/
  }

  .dropdownMenu /deep/ .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #0d7ef6 !important;
  }

  .dropdownMenu /deep/ .el-dropdown-menu__item:not(.is-disabled) {
    /*解决子菜单点击后空白的问题*/
    /*background-color: transparent;*/
    background: none !important;
  }

  .dropdownMenu /deep/ .el-checkbox__label {
    color: white;
  }

  .menu {
    flex: 1;
    position: relative;
    cursor: pointer;
    background-color: rgba(88, 190, 186, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.40);
  }

  .menu:last-child {
    border-right: 0 solid rgba(255, 255, 255, 0.40);
  }

  .menu:hover {
    background-color: rgba(88, 190, 186, 0.8);
  }

  .el-icon-upload2:hover {
    color: #2adc43;
  }

  .mapType {
    width: 150px;
    height: 100px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: rgba(250, 250, 250, 0.3);
    overflow: hidden;
    transition: all .3s;
    text-align: center;
    /*line-height: 100px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 0;

    img {
      display: inline-block;
      height: 96%;
      width: 96%;
    }
  }

  .mapType:hover {
    /*transform: scale(1.1);*/
    padding: 3px;
  }

  .mapType:last-child {
    /*padding-right: 5px;*/
  }

  .mapTypeText {
    color: white;
    position: absolute;
    left: 5px;
    bottom: 4px;
    width: calc(100% - 5px);
    height: 20px;
    background: rgba(52, 52, 52, 0.7);
    line-height: 20px;
    text-align: center
  }

  .padingR5 {
    /*padding-right: 5px;*/
  }

  .textWidth {
    width: calc(100% - 10px);
  }

  .location {
    position: fixed;
    left: calc(50% - 150px);
    top: calc(50% - 90px);
    width: 300px;
    height: 180px;
    /*background-image: linear-gradient(0deg, rgba(23, 120, 142, 0.80) 0%, rgba(58, 160, 149, 0.80) 100%);*/
    z-index: 100;
    background: rgba(15, 114, 195, 1);
  }

  .locationBtn {
    margin: 5px auto 0 auto;
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    background-color: #1690f3;
  }

  .locationBtn:hover {
    /*background-color: rgba(88, 190, 186, 1);*/
    background-color: #1b88e1;
  }

  .locationTitle {
    width: calc(100% - 3px);
    margin: 3px 0 0 3px;
    height: 30px;
    padding-left: 10px;
    line-height: 30px;
    background-color: rgba(250, 250, 250, 0.3);
    box-sizing: border-box
  }

  .item-title {
    /*width: 280px;*/
    height: 35px;
    /*background-color: rgba(62,176,165,0.52);*/
    /*box-shadow: inset 0 0 15px rgba(0,245,255,1);*/
    background: rgba(15, 113, 192, 1);
    line-height: 35px;
    /*margin: 5px 5px 0 5px;*/
    padding-left: 10px;
    /*color: #00FFF0;*/
    color: white;
    font-size: 1.8rem;

    &.active {
      box-shadow: inset 0 0 15px rgba(0, 245, 255, 1);
      background: none;
    }
  }

  .number {
    color: #F9D72B;
    padding-right: 5px;
    font-weight: bold
  }

  .people {
    cursor: pointer;
    line-height: 30px;
    /*color: #00F5FF;*/
    color: white;
    background: rgba(24, 32, 45, 0.2);
    font-size: 1.8rem;
    /*background-color: rgba(255, 255, 255, 0.7);*/
  }

  .peopleActive {
    color: #fff;
    /*color: #00F5FF;*/
    line-height: 30px;
    box-shadow: inset 0 0 15px rgba(0, 245, 255, 1);
    /*background-color: rgba(62,176,165, 0.7);*/
  }

  .ctrlButton {
    cursor: pointer;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 2.4rem;
    color: #00F5FF;
    position: absolute;
    top: calc(50% - 40px);
    width: 40px;
    height: 40px;
    background-image: url('../../../assets/img/header/tuceng.png');
    /*background-color: rgba(65,165,155,0.5);*/
    text-align: center;
    line-height: 40px
  }

  .triangle-down {
    position: absolute;
    top: 100%;
    left: 230px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid rgba(23, 120, 142, 0.70);
  }

  .event-detail {
    line-height: 32px;
    font-size: 1.4rem;
    color: #ffffff;
    width: 50%;
    border-bottom: 1px solid #fff
  }

  .peopLocation {
    color: #0db3b3;
  }

  .peopLocation:hover {
    color: #799fb3;
  }
</style>
<style>
  .photofade-enter-active,
  .photofade-leave-active {
    transition: opacity .5s;
  }

  .ol-full-screen-false {
    width: 30px;
    height: 30px;
    border: 0 solid rgba(0, 0, 0, 0);
    background-color: rgba(88, 190, 186, 0.6);
  }

  .ol-full-screen-false:focus {
    border-style: solid;
    border-color: #3abcb0;
  }

  .ol-popup {
    width: 300px;
    background-image: linear-gradient(0deg, rgba(23, 120, 142, 0.80) 0%, rgba(58, 160, 149, 0.80) 100%);
    height: 90px;
    margin-top: 15px;
    margin-left: -30px;
  }

  .ol-popup-closer {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    z-index: 100;
    right: 0;
    top: 18px;
  }

  .popup-triangle-top {
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid rgba(58, 160, 149, 0.70);
  }

  .padingR5 {
    padding-right: 5px;
  }

  .tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
  }

  .tooltip-measure {
    opacity: 1;
    font-weight: bold;
  }

  .tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
  }

  .tooltip-measure:before, .tooltip-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
  }

  .tooltip-static:before {
    border-top-color: #ffcc33;
  }

  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #36c1af;
    border-color: #39bba8;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #36c1af;
    border-color: #39bba8;
  }

  .el-form--inline .el-form-item {
    margin-bottom: 5px;
  }

  /*日历*/
  .wh_content_all[data-v-2ebcbc83] {
    background:linear-gradient(86deg,rgba(3,83,170,1) 2%,rgba(0,141,255,1) 100%);
    /*background: none;*/
    /*background-color: rgba(60, 210, 222, 0.5);*/
  }

  .wh_content_item .wh_isToday[data-v-2ebcbc83] {
    /*background-color: rgba(0, 0, 0, 0.2) !important;*/
  }

  .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
    /*background-color: #047160;*/
    /*background-color: #008DFF !important;*/
  }

  .wh_item_date[data-v-2ebcbc83]:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .searchPersonnel{
    height: 345px;
    padding: 0 10px 10px;
    box-sizing: border-box;
    /*height: 345px;*/
    /*overflow: auto;*/
    /*position: relative;*/
    /*right: -17px;*/
    /*padding-left: -21px;*/
    /*margin-left: -20px;*/
    /*padding-right: 5px;*/
  }
  .patrolInput{
    /*width: 280px;*/
    height: 345px;
  }
  .patrolInput .el-input__inner {
    /*background-color: rgba(255, 255, 255, 0.7);*/
    /*color: white;*/
    /*color: #00F5FF;*/
    color: white;
    border-radius: 5px;
    border-color: rgba(0, 245, 255, 0.5);;
  }

  .patrolInput .el-input__inner::-webkit-input-placeholder {
    /*color: rgba(51, 51, 51, 0.55)!important;*/
    /*color: #00F5FF;*/
    color: white;
  }

  .patrolInput .el-input--suffix .el-input__inner {
    /*padding-right: 10px !important;*/
    color: white;
    /*color: rgba(51, 51, 51, 0.55)!important;*/
    /*color: #00F5FF;*/
    /*background-color: rgba(255, 255, 255, 0.7)!important;*/
    border-radius: 5px !important;
  }

  .patrolInput .el-icon-arrow-up:before, .partrolInput .el-icon-date:before {
    /*color: rgba(51, 51, 51, 0.55)!important;*/
    color: white !important;
  }

  .patrolInput .el-input__prefix .el-icon-date:before {
    /*color: #00F5FF !important;*/
    color: white !important;
  }

  .markActive {
    margin: auto;
    border-radius: 100px;
    /*background: #047160;*/
    /*background:linear-gradient(86deg,rgba(10,204,170,1) 100%);*/
    /*background-color: red;*/
    z-index: 2;
  }

  .markIsPatrol {
    margin: auto;
    border-radius: 100px;
    /*background: #ff5b41;*/
    background-color: #0CD3C7;
    z-index: 2;
  }

  .trackDivActive {
    background: #0f71c0;
    /*background-color: rgba(0, 0, 0, 0.2);*/
    /*background-color: #0CD3C7;*/
    /*background-color: rgba(40, 129, 113, 0.6);*/
  }

  .trackDivNoActive {
    background-color: rgba(0, 0, 0, 0.2);
    /*background: #0f71c0;*/
  }

  .popupDiv {
    position: relative;
    width: 500px;
    /*height: 180px;*/
    z-index: 1000;
    background: #0f71c0;
    /*background-image: linear-gradient(0deg, rgba(23, 120, 142, 0.80) 0%, rgba(58, 160, 149, 0.80) 100%);*/
  }

  .el-tabs__item {
    color: #fff;
    font-size: 1.6rem;
  }

  .el-tabs__item.is-active, .el-tabs__item:hover {
    /*color: #39a492;*/
    color: #0FF;
    font-weight: bold;
  }

  .el-tabs__active-bar {
    background-color: #39a492;
  }

  /*.dropdown-ctrl .el-button {*/
  /*  font-size: 16px;*/
  /*  background: rgb(15, 114, 195);*/
  /*  border: none;*/
  /*  border-right: 1px solid rgba(255, 255, 255, 0.40);*/
  /*  padding: 0 10px;*/
  /*  height: 30px;*/
  /*  border-radius: 0;*/
  /*}*/

  /*.dropdown-ctrl /deep/ .el-badge__content.is-fixed {*/
  /*  z-index: 99;*/
  /*}*/

  /*.dropdown-ctrl .el-button--primary {*/
  /*  font-size: 16px;*/
  /*  background: rgb(15, 114, 195);*/
  /*  border: none;*/
  /*  border-right: 1px solid rgba(255, 255, 255, 0.40);*/
  /*  !*background:rgba(15,114,195,1);*!*/
  /*  !*background-color: rgba(88, 190, 186, 0.6);*!*/
  /*  !*border-color: rgba(88, 190, 186, 0.6)*!*/
  /*}*/

  /*.dropdown-ctrl .el-button--primary:hover {*/
  /*  !*background-color: rgba(88, 190, 186, 0.8);*!*/
  /*}*/

  /*.dropdown-ctrl .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {*/
  /*  !*color: rgb(88, 190, 186);*!*/
  /*  !*background-color: rgb(88, 190, 186);*!*/
  /*  background: #0d7ef6*/
  /*}*/

  .el-radio__input.is-checked + .el-radio__label {
    color: rgba(250, 250, 250, 0.9);
  }

  .el-radio__input.is-checked .el-radio__inner {
    border-color: #0db3b3;
    background: #0db3b3;
  }
</style>
<style scoped lang="less">
  #command /deep/ .tooltip {
    /*长按标绘  等*/
    font-size: 2rem;
    color: #FFFFFF;
  }

  #command /deep/ .ol-popup {
    /*整个弹框*/
    background: rgba(15, 114, 195, 1);
    color: #FFFFFF;
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 10px;
  }

  #command /deep/ .el-icon-close {
    /*关闭按钮*/
    position: absolute;
    top: 1px;
    right: 1px;
    /*background-color: rgba(0, 0, 0, 0.4);*/
    z-index: 99;
  }

  #command /deep/ .ol-popup-code {
    background: rgba(15, 114, 195, 1);
  }

  #command /deep/ .ol-popup-code p {
    font-size: 1.8rem;
    color: #FFFFFF;
  }

  #mapFull /deep/ .ol-full-screen-false {
    cursor: pointer;
    width: 30px;
    height: 30px;
    /*background-color:rgba(15,114,195,1);*/
    border: none;
    background: url("../../../assets/img/map/full.png") 6px 6px no-repeat;
  }

  #mapFull /deep/ .ol-control {
    background-color: rgba(15, 114, 195, 1);
    width: 30px;
    height: 30px;
  }

  #mapFull /deep/ .ol-full-screen-true {
    cursor: pointer;
    width: 30px;
    height: 30px;
    /*background-color:rgba(15,114,195,1);*/
    border: none;
    background: url("../../../assets/img/map/small.png") 6px 6px no-repeat;
  }

  .leftDiv {
    padding-bottom: 5px;
    background-image: url('../../../assets/img/header/tuceng.png')
  }

  .el-input__suffix-inner .el-input__icon:after {
    color: #00F5FF !important;
  }

  .rightWrapper {
    padding: 5px;
    box-sizing: border-box;
    background-image: url("../../../assets/img/header/tuceng.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .calendar{
    & /deep/ .wh_content_item .wh_isToday {
      background-color: rgba(0, 0, 0, 0.2) !important;
    }

    & /deep/ .wh_content_item .wh_chose_day {
      /*background-color: #047160;*/
      background-color: #008DFF !important;
    }
  }
  .rightBottomItem {
    padding-bottom: 5px;
    color: white;
    height: 340px;
    overflow: hidden;
    /*overflow: auto;*/
    /*overflow: -moz-scrollbars-none;*/
    /*-ms-overflow-style: none;*/
    /*&::-webkit-scrollbar { width: 0 !important }*/
    /*&::-webkit-scrollbar {display:none}*/
    .rightBottomItemScoll{
      height: 340px;
      overflow-y: scroll;
      position: relative;
      right: -27px;
      padding-left: -21px;
      margin-left: -20px;
      padding-right: 20px;
    }
  }

  .leftDivNav {
    position: absolute;
    top: 45px;
    right: -40px;

    .navItem {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      cursor: pointer;
      background-image: url("../../../assets/img/header/tuceng.png");
      /*background-repeat: no-repeat;*/
      /*background-size: cover;*/
      font-size: 1.8rem;
      width: 30px;
      height: 70px;
      line-height: 35px;
      text-align: center;
      margin: 0 auto 10px;
      padding: 10px 5px;
      color: white;

      &.active {
        /*background:rgba(255,255,255,0.1);*/
        background: rgba(8, 53, 113, .7);
      }
    }
  }

  .rightButton {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .footer {
    margin-top: 40px;
    color: #ffffff;
    font-size: 16px;

    .info {
      .select {
        width: 52px;
        height: 35px;
      }

      .select /deep/ .el-input__inner {
        padding-left: 5px;
        padding-right: 0;
      }

      .select /deep/ .el-input__icon {
        width: 15px;
      }

      .select /deep/ .el-select__caret {
        /*transform:rotate(270deg);*/
        /*color: black;*/
      }

      .select /deep/ .el-select__caret.is-reverse {

      }
    }

    .paging {
      /*background-color: pink;*/
      text-align: right;
      padding-right: 30px;
      margin-top: -20px;

      & /deep/ .el-pagination.is-background .btn-prev {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination.is-background .btn-next {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pager li {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination__total, & /deep/ .el-pagination__sizes {
        float: left;
        font-size: 1.6rem;
        height: 35px;
        line-height: 35px;
      }

      & /deep/ .el-input__inner {
        /*width:52px;*/
        height: 35px;
      }

      & /deep/ .el-input__icon {
        /*width: 20px;*/
        /*line-height: 3;*/
      }

      & /deep/ .el-input .el-input__inner {
        padding-right: 20px;
        color: #FFFFFF;
        font-size: 1.6rem;
      }
    }
  }
  .line {
    display: inline-flex;
    height: 21px;
    width: 1px;
    background: rgba(0, 255, 255, 1);
    margin: 0 10px;
    vertical-align: middle;
  }
  .transectDialog /deep/ .el-dialog{
    width: 57%;
  }
  // 查看弹框
  .dialogContent {
    & /deep/ .el-dialog {
      /*width: 50% !important;*/
    }

    & /deep/ .el-dialog__body {
      position: relative;
    }
  }

  .leftForm, .rightMedia {
    display: inline-block;
  }

  .leftForm {
    /*background-color: red;*/
    font-size: 1.8rem;
    /*display: inline-flex;*/
    width: 50%;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
    padding-right: 2%;

    .leftItem {
      .leftTitle {
        display: inline-block;
        width: 40%;
        text-align: right;
        font-weight: 400;
      }

      span:nth-of-type(2) {
        margin-left: 20px;
      }
    }

    div {
      line-height: 30px;
    }
  }

  .rightMedia {
    height: 500px;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar { width: 0 !important }
    &::-webkit-scrollbar {display:none}
    /*position: absolute;*/
    /*top: 30px;*/
    /*right: 15px;*/
    /*background-color: pink;*/
    width: 48%;
    box-sizing: border-box;
    font-size: 1.8rem;

    .rightMediaWapper {
      width: 100%;
    }

    .MediaItemTitle {
      font-size: 1.8rem;
      color: white;
      text-align: center;
      margin-bottom: 10px;
    }

    .titleText {

    }

    .MediaItemContent {
      padding: 10px;
      width: 100%;
      text-align: center;

      .audioItem {
        margin-bottom: 10px;
      }
    }

    .MediaItem {
      margin-bottom: 10px;

      .imgItemWrapper {
        width: 100%;
      }

      .MediaImgItem {
        background-color: pink;
        cursor: pointer;
        display: inline-flex;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
        margin-right: 10px;

        .MediaImgItem_img {
          background-color: red;
        }

        &:last-child {
          margin-right: 0;
        }

        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }

  .lineItem {
    font-size: 1.8rem;
    line-height: 30px;
  }
  .collapseItem{
    font-size: 2rem;
    text-indent: 20px;
    margin-bottom: 15px;
    background: rgba(24, 32, 45, 0);
    & /deep/ .el-collapse-item__wrap{
      /*padding-top: 10px;*/
      background: none;
      border-bottom: none;
    }
    & /deep/ .el-collapse-item__content{
      font-size: 1.6rem;
      padding-top: 10px;
      padding-bottom: 0;
    }
    & /deep/ .el-collapse-item__header{
      border-bottom: none !important;
      font-size: 1.6rem;
    }
    & /deep/ .el-collapse{
      border: none !important;
    }
    & /deep/ .el-checkbox__label{
      display: inline-block;
      padding-left: 10px;
      line-height: 26px;
      font-size: 16px;
      text-indent: 8px;
    }
  }
  .personnelWrapper{
    height: 800px;
    & /deep/ .el-scrollbar__wrap {
      /* overflow: scroll; */
      overflow-y: scroll;
      overflow-x: hidden;
      height: 100%;
    }
    /*overflow: hidden;*/
    /*padding-top: 10px;*/
    /*padding-left: 10px;*/
    /*overflow: auto;*/
    /*overflow: -moz-scrollbars-none;*/
    /*-ms-overflow-style: none;*/
    /*&::-webkit-scrollbar { width: 0 !important }*/
    /*&::-webkit-scrollbar {display:none}*/
    /*& /deep/ .el-collapse{*/
    /*  border: none !important;*/
    /*}*/
  }
  .scool{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: hidden;
    /*height: 817px;*/
    /*overflow-y: scroll;*/
    /*position: relative;*/
    /*right: -17px;*/
    /*padding-left: -21px;*/
    /*margin-left: -20px;*/
    /*padding-right: 20px;*/
  }
  .transectWrapper{
    padding: 10px;
    height: 800px;
    & /deep/ .el-scrollbar__wrap {
      /* overflow: scroll; */
      overflow-y: scroll;
      overflow-x: hidden;
      height: 100%;
    }
    /*box-sizing: border-box;*/
    /*overflow: hidden;*/
    /*overflow: auto;*/
    /*overflow: -moz-scrollbars-none;*/
    /*-ms-overflow-style: none;*/
    /*&::-webkit-scrollbar { width: 0 !important }*/
    /*&::-webkit-scrollbar {display:none}*/
    /*& /deep/ .el-collapse{*/
    /*  border: none !important;*/
    /*}*/
    .transectContent{
      height: 100%;
      width: 100%;
      /*overflow-y: scroll;*/
      /*position: relative;*/
      /*color: #ffffff;*/
      /*right: -27px;*/
      /*padding-left: -21px;*/
      /*margin-left: -20px;*/
      /*padding-right: 20px;*/
      & /deep/ .el-collapse {
        border-top: none;
        border-bottom: none;
      }
      .transectTitle{
        height: 32px;
        line-height: 31px;
        color: #ffffff;
        background: #0f71c0;
        font-size: 18px;
        text-align: center;
        margin-bottom: 15px;
      }
      .transect-pagination{
        position: absolute;
        bottom: 10px;
        right: -30px;
      }
    }
  }
  .carousel /deep/ .el-carousel__indicator--horizontal .el-carousel__button{
    background-color: white !important;
  }
  .expertDialog{
    & /deep/ .el-dialog {
      width: 35% !important;
    }
  }
  .transectDialog-footer{
    font-size: 16px;
    position: relative;
    bottom: -16px;
    text-align: right;
  }
/*  查看表格样式*/
  .seeDialogTable{
    .seeDialogParent{
      .parentTable{

      }
    }
    .seeDialogChild{
      margin-top: 15px;
      .childTable{

      }
      .enclosureItem{
        margin-top: 10px;
        & /deep/ .el-scrollbar__wrap {
          /* overflow: scroll; */
          overflow-y: scroll;
          overflow-x: hidden;
          height: 100%;
        }
      }
      .enclosureImg{
        width: 100%;
      }
      .enclosureImgList{
        cursor: pointer;
        display: inline-flex;
        flex-wrap: wrap;
        width: 32%;
        height: 170px;
        margin-bottom: 10px;
        margin-right: 2%;
        &:nth-of-type(3n){
          margin-right: 0;
        }
      }
      .enclosureMp3{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 150px;
        line-height: 150px;
        /*text-align: center;*/
      }
      .enclosureVideo{
        width: 100%;
      }
      .videoItem{
        display: inline-flex;
        width: 48%;
        height: 250px;
        margin-bottom: 10px;
        &:nth-of-type(odd) {
          margin-right: 2%;
        }
      }
      .mp3Item{
        height: 40px;
        margin-bottom: 10px;
      }
    }
    .seeDialogTitle{
      text-align: center;
      font-size: 18px;
      margin-bottom: 15px;
    }
    ul{
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      border-left: 1px solid #ffffff;
      border-top: 1px solid #ffffff;
    }
    .tableItem{
      display: flex;
      width: 50%;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .w100{
      text-align: center;
      width: 100%;
    }
    .itemList{
      width: 50%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      box-sizing: border-box;
      border-bottom: 1px solid #ffffff;
      border-right: 1px solid #ffffff;
      text-indent: 10px;
    }
  }
/*  左边样地列表的样式*/
  .transectContent /deep/ .el-checkbox__inner {
    height: 22px;
    width: 22px;
    /*background-color: #ffffff;*/
    font-size: 28px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: none;
  }
  .transectContent /deep/ .el-tooltip__popper {
    background-color: red;
  }
  .transectContent /deep/ .el-checkbox__inner::after {
    border-width: 2px;
    /* border-color: black; */
    height: 9px;
    left: 6px;
    top: 3px;
    width: 6px;
  }
  .transectContent /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
    top: 10px;
    background: white;
  }
  .transectContent /deep/ .el-checkbox__label{
    font-size: 1.6rem;
  }
  .batchBtn{
    padding: 8px 15px;
    /* border: none; */
    border: 1px solid #ffffff;
    border-radius: 3px;
    color: #FFF;
    background-color: #0FF3;
    cursor: pointer;
    &:hover {
      background: rgba(12, 161, 151, 1);
    }
  }
  .dropdown-ctrl{
    & /deep/ .el-button {
      font-size: 16px;
      background: rgb(15, 114, 195);
      border: none;
      border-right: 1px solid rgba(255, 255, 255, 0.40);
      padding: 0 10px;
      height: 30px;
      border-radius: 0;
    }

    & /deep/ .el-badge__content.is-fixed {
      z-index: 99;
    }
  }
</style>
